Unable to reference filtered array in ngRepeat - AngularJS

Question

I have an ngRepeat directive that is filtered as:

<li ng-repeat='item in items | filter:searchTerm as filteredItems'>{{item.name}}</li>

I am tring to access the filteredItems in my controller like $scope.filteredItems but I'm getting an undefined. How should I solve this?

I have nested controllers. Is the problem with $scope?

My controllers are something like this in my view:

<div ng-controller='MainController'>
 <div ng-controller='FilterController'>
  <li ng-repeat='item in items | filter:searchTerm as filteredItems'>{{item.name}}</li>
 </div>
</div>

I'm trying to access $scope.filteredItems in FilterController.

you can try <li ng-repeat='item in (filteredItems = items | filter:searchTerm)'>{{item.name}}</li>, but not sure that this works, also this code can add filteredItems not in main scope, but in ngRepeat own scope — Grundy
– Grundy, Commented Jul 9, 2015 at 16:58
@Grundy Exactly. That's why we need to see more code to answer proper. — Vineet
– Vineet, Commented Jul 9, 2015 at 16:59

Grundy · Accepted Answer · 2015-07-10 05:49:17Z

You can use assigning in ng-repeat expression like ng-repeat='item in filteredItems = (items | filter:searchTerm)'
NOTE: in comment was wrong variant, because assigning more priority than pipe.

var appModule = angular.module('app', []);
appModule.controller('MainController', function ($scope) {
    //some functions and variables here
    $scope.items = [
        {name:'1234'},
        {name:'2341'},
        {name:'3412'},
        {name:'4123'},
        {name:'4321'}
    ];
});
appModule.controller('FilterController', function ($scope) {
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller='MainController'>
    <div ng-controller='FilterController'>
        <!-- FilterController has many filters that are not related -->
        <input type="text" ng-model="searchTerm" />
        <ul>
            <li ng-repeat='item in filteredItems = (items | filter:searchTerm)'>{{item.name}}</li>
        </ul>
        {{filteredItems}}
    </div>
</div>

but seems that better filter in controller:

var appModule = angular.module('app', []);
appModule.controller('MainController', function ($scope) {
    //some functions and variables here
    $scope.items = [
        {name:'1234'},
        {name:'2341'},
        {name:'3412'},
        {name:'4123'},
        {name:'4321'}
    ];
});
appModule.controller('FilterController', function ($scope,$filter) {
    var filter = $filter('filter');
    $scope.filter = function(){
      $scope.filteredItems = filter($scope.items, $scope.searchTerm);
    }
    $scope.filter();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller='MainController'>
    <div ng-controller='FilterController'>
        <!-- FilterController has many filters that are not related -->
        <input type="text" ng-model="searchTerm" ng-change="filter()" />
        <ul>
            <li ng-repeat='item in filteredItems'>{{item.name}}</li>
        </ul>
        {{filteredItems}}
    </div>
</div>

Collectives™ on Stack Overflow

Unable to reference filtered array in ngRepeat - AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related