Angular(1.x)过滤器不使用对象数组

时间:2017-10-05 06:28:55

标签: angularjs angularjs-ng-repeat angular-filters angular1.6

我正在尝试输入一个像这样的搜索词:

<div class="form-group">
    <input type="text" class="form-control" ng-model="vm.search.term" placeholder="Enter search term">
</div>

然后使用此搜索词作为使用ng-repeat渲染的对象数组的过滤器,如下所示:

<tbody>
    <tr ng-repeat="p in vm.items track by $index | filter: vm.search.term">
        <td><a>{{p.uid}}</a></td>
        <td>{{p.em}}</td>
        <td>{{p.ct | date:'medium'}}</td>
    </tr>
</tbody>

但是在开发人员的控制台中,我收到以下错误:

dashboard-js-bundle.min.js:117 Error: [filter:notarray] http://errors.angularjs.org/1.5.5/filter/notarray?p0=0
    at dashboard-js-bundle.min.js:6
    at dashboard-js-bundle.min.js:161
    at fn (eval at compile (dashboard-js-bundle.min.js:230), <anonymous>:4:345)
    at y (dashboard-js-bundle.min.js:298)
    at dashboard-js-bundle.min.js:298
    at dashboard-js-bundle.min.js:141
    at n.$digest (dashboard-js-bundle.min.js:142)
    at n.$apply (dashboard-js-bundle.min.js:145)
    at l (dashboard-js-bundle.min.js:97)
    at H (dashboard-js-bundle.min.js:101)

编辑:以下是items数组的样子:

(50) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{_id: "59d1f68dc1f8554acbb65533", __v: 0, cid: "59c89f29569cb11336420d3c", uid: "1234", em: "ap@gmai.com", …}
1
:
{_id: "59d2cd255b45b78d2108f399", uid: "2315", cid: "59c89f29569cb11336420d3c", em: "vf@gmail.com", tags: "l", …}
2
:
{_id: "59d2ce515b45b78d21090022", uid: "123", cid: "59c89f29569cb11336420d3c", em: "dan@gmail.com", tags: "h", …}
3
:
{_id: "59d2ce515b45b78d21090023", uid: "4561", cid: "59c89f29569cb11336420d3c", em: "lp@fg.com", tags: "Z", …}
4
:
{_id: "59d2d38c5b45b78d21093941", uid: "3412", cid: "59c89f29569cb11336420d3c", em: "gh@we.com", tags: "pl", …}

...

请帮助我找出我做错了什么以及如何纠正错误。 TIA。

1 个答案:

答案 0 :(得分:2)

根据你的帖子,它应该是,

  <tr ng-repeat="p in vm.items | filter: vm.search.term  track by $index ">

<强>样本

&#13;
&#13;
var app = angular.module('testApp',[]);
app.controller('testCtrl',function(){
  var vm = this;
  vm.items = [{
  "id": 1,
  "uid": 1,
  "em": "dmacgragh0@dagondesign.com",
  "cid": 61,
  "tags": "31-379-4639"
}, {
  "id": 2,
  "uid": 2,
  "em": "vattac1@istockphoto.com",
  "cid": 73,
  "tags": "88-631-0461"
}, {
  "id": 3,
  "uid": 3,
  "em": "nivers2@vk.com",
  "cid": 9,
  "tags": "25-518-4995"
}];
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div ng-controller= "testCtrl as vm">
    <input type="text" class="form-control" ng-model="vm.search.term" placeholder="Enter search term">
 <table>
 <tbody>
    <tr ng-repeat="p in vm.items  | filter: vm.search.term track by $index">
        <td><a>{{p.uid}}</a></td>
        <td>{{p.em}}</td>      
    </tr>
</tbody>
</table>
</div>
</body>
&#13;
&#13;
&#13;