angularjs过滤器对象属性没有ng-repeat

时间:2015-11-05 08:56:03

标签: angularjs angularjs-filter

我有一个对象数组,我需要返回包含特定属性的对象。

$scope.foobar = [
    {"id": 15, "name": "bar1"},
    {"id": 25, "name": "bar2"},
    {"id": 215, "name": "bar3"},
    {"id": 7415, "name": "bar4"}
];

我需要为id25的对象分配一个新变量。以下不起作用:

<div ng-init="item = foobar | filter: { id: 25 }">...</div>

如何在没有ng-repeat的情况下使用角度过滤器从数组中选择项目的子集并将其作为新数组返回。

3 个答案:

答案 0 :(得分:3)

如果您的视图不需要,请不要将其放在模板中。如果你不想编写自己的过滤函数并使用angular filterFilter(有角度的一些命名乐趣:)),将它注入你的控制器并在那里设置你的变量。

angular.module('myApp', [])

.controller('MainController', function ($scope, filterFilter) {

  $scope.foobar = [
    {"id": 15, "name": "bar1"},
    {"id": 25, "name": "bar2"},
    {"id": 215, "name": "bar3"},
    {"id": 7415, "name": "bar4"}
  ];
  
  // use the filter Filter to set your var
  $scope.item = filterFilter($scope.foobar, {id: 25});
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
  {{item}}  
</div>

答案 1 :(得分:2)

我知道这个问题太老了,无法回答,但可能会对其他问题有所帮助。

<span ng-bind="(foobar | filter : {id : 25 } : true)[0].name"></span>

您也可以使用$scope变量代替25

答案 2 :(得分:1)

您需要一个能够提取正确数据的函数:

$scope.getFoo = function(id){
  for(var i = 0; i< foobar.length;++i)
    if(foobar[i].id === id)
      return foobar[i];
};

$scope.foobar = [
    {"id": 15, "name": "bar1"},
    {"id": 25, "name": "bar2"},
    {"id": 215, "name": "bar3"},
    {"id": 7415, "name": "bar4"}
];

HTML:

<div ng-init="item = getFoo(25)">...</div>