Angular：如何使用 JSON 值过滤视图答案

【问题标题】：Angular: How to filter in views with JSON valuesAngular：如何使用 JSON 值过滤视图
【发布时间】：2016-04-12 09:16:02
【问题描述】：

我想看看为什么一个非常简单的 Angular 过滤器在示例中不适合我。我在网上找到的所有内容都指向这种格式，但它似乎不起作用。基本上，我只想要包含值“已完成”作为状态的数组的信息。这是我的代码：

<div class="span12" id="trainingWidget" ng-controller = "trainingInfo">
      <div class="span3 pull-right">
        <h4 class="theme-color">Available Courses</h4>
        <table id="courseList">
          <thead>
            <tr>
              <th>Location</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in training | limitTo : 6">
              <td>{{item.location}}</td>
              <td>{{item.date}}</td>
            </tr>

          </tbody>
        </table>
      </div>
      <div class="span3 pull-right">
        <h4 class="theme-color">Your Last Course</h4>
        <div id="courseStatus">
          <p ng-repeat="item in training | limitTo: 1 | filter: {status: completed}">Was completed on <span id="recentTrainingDate">{{item.completionDate}}</span><br />
            <span id="recentTrainingTitle">{{item.name}}</span></p>
          <p class="theme-color">STATUS</p>
          <p><i class="icon icon-ok"></i> Up To Date</p>
        </div>
      </div>
    </div>

这是 JSON：

[
    {
        "location": "Cincinnati, OH",
        "date": "Feb 18, 2016",
        "name": "ABC Certification",
        "status": "future",
        "completionDate": ""
    },
    {
        "location": "Houston, TX",
        "date": "Mar 1-3, 2016",
        "name": "123 Certification",
        "status": "future",
        "completionDate": ""
    },
    {
        "location": "Cincinnati, OH",
        "date": "Apr 26-28, 2016",
        "name": "Master Trainer Certification",
        "status": "future",
        "completionDate": ""
    },
    {
        "location": "Houston, TX",
        "date": "May 15-17, 2016",
        "name": "ABC Certification",
        "status": "future",
        "completionDate": ""
    },
    {
        "location": "Cincinnati, OH",
        "date": "July 12-14, 2016",
        "name": "123 Certification",
        "status": "future",
        "completionDate": ""
    },
    {
        "location": "Houston, TX",
        "date": "Sept 28-29, 2016",
        "name": "Birkman Method&reg; Certification Training",
        "status": "future",
        "completionDate": ""
    },
    {
        "location": "Houston, TX",
        "date": "Nov 9-11, 2015",
        "name": "Birkman Method&reg; Certification Training",
        "status": "completed",
        "completionDate": "July 15, 2015"
    }
]

我不认为它是必要的，但这里是控制器 sn-p：

myBirkman.controller('trainingInfo', ['$scope', '$http', '$filter', function($scope, $http, $filter) {
    $http.get('assets/js/lib/angular/trainingData.json').success(function(data) {
        $scope.training = data;

    });
}]);

第一个 ng-repeat 完美运行，但在第二个重复时，我只想显示第一个包含“完成”作为“状态”值的数组。非常感谢您的帮助。

【问题讨论】：

标签： javascript angularjs json filter

【解决方案1】：

'completed' 应该是一个字符串：

{status: 'completed'}

否则会搜索$scope.completed。

【讨论】：

谢谢，但即使使用单引号，它仍然无法正常工作。
啊，抱歉。这是正确的答案。我的问题是唯一包含该值的项目是最后一个。我认为 LimitTo: 1 会将其限制为仅具有该值的项目，而不是总项目中的 1 个。第一项的completionDate 值为null。
很高兴听到！我认为您想将limitTo 过滤器放在filter 过滤器之后，那么它将仅限制通过第一个过滤器（limitTo）的过滤器。像这样：item in training | filter: {status: 'completed'} | limitTo: 1