filter: notarray error in angularjs

Question

http://plnkr.co/edit/cJsScs8ixF1aq85Ri7nV?p=preview

filter is not working. Other part of code also breaks. Throwing error filter:notarray. how it can be fixed

<head>
  <link rel="stylesheet" href="style.css">

</head>

<body ng-init="items=[3,1,2,3];">
  <h1>Hello Plunker!</h1>

  <div >

  </div>
  <input type="text" ng-model="nm" />



  <div ng-repeat="item in items track by $index | filter:nm" ng-hide="hide">
    {{item}}

  </div>

  <button ng-click="hide=!hide">Toggle </button>
  <button ng-click="items[items.length]=items.length">Add</button>


  <script src="https://code.angularjs.org/1.4.2/angular.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

andyhasit · Accepted Answer · 2015-08-30 20:59:35Z

26

The documentation for ng-repeat says:

track by must always be the last expression

So you need to change this line:

<div ng-repeat="item in items track by $index | filter:nm" ng-hide="hide">

to this:

<div ng-repeat="item in items | filter: nm track by $index" ng-hide="hide">

I know it's obscure, and this one catches people out. Often the documentation isn't on the page you expect it to be (e.g. filter) but is still in a logical place (e.g. ng-repeat). It 'should' all be there.

answered Aug 30, 2015 at 20:59

andyhasit

15.5k7 gold badges54 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Taras Over a year ago

Thanks for this Andyhasit. I found that the first example given worked for me. E.g. <div class="upload-doc" ng-repeat="doc in vm.uploadedDocs track by $index | orderBy: 'timeStamp' : true">

Collectives™ on Stack Overflow

filter: notarray error in angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related