angularjs - how to get in the controller the index of an item in a ng-repeat filter based on the value of one of its properties?
Your ng-repeat expression creates the filteredList array on your scope.
<li ng-repeat="item in (filteredItems = (items | filter:query))">
You can loop through it like any array, checking for the item matching the name parameter.
$scope.filteredItems
Here is a demo: http://plnkr.co/69nnbaZaulgX0odG7g7Y
See this related post: AngularJS - how to get an ngRepeat filtered result reference
Update
Your comments indicate that you don't want to wait for ng-repeat to create the array of filtered items. You can use the $filter service to easily initialize the same array before the page loads. Use:
$scope.filteredItems = $filter('filter')($scope.items, {name: $scope.query}, false)
Doing so does not interfere with ng-repeat
saving its filter results to the same filteredItems
array during DOM creation.
Here is an updated (and interactive) demo: http://plnkr.co/NSvBz1yWvmeFgXITutZF
Related videos on Youtube
Fred
Updated on June 04, 2022Comments
-
Fred almost 2 years
I use a ng-repeat in my html file to display filtered items:
<li ng-repeat="item in (filteredItems = (items | filter:query))"> {{ item.name }} </a>
In the controller, I'd like to get the index of an item based on one of his property.
Precision: I'd like to get the index in the filtered list and not in the whole list.
Here for example, it will be the index of the item witch name is
some_item_7
.var app = angular.module('myApp', []); app.controller('MyCtrl', ['$scope', function MyCtrl($scope) { $scope.query = 'some'; $scope.items = [ { name: 'some_item_1' }, { name: 'another_item_2' }, { name: 'some_item_3' }, { name: 'another_item_4' }, { name: 'some_item_5' }, { name: 'another_item_6' }, { name: 'some_item_7' }, { name: 'another_item_8' }, { name: 'some_item_9' } ]; $scope.itemNext = function (item) { console.log(item.name); }; $scope.getIndexFromName = function (name) { console.log("trying to get the index of the item with name = " + name); } $scope.getIndexFromName('some_item_7'); } ]);
http://plnkr.co/edit/C8gL9qV1MyonTwDENO9L?p=preview
Any idea ?
-
j.wittwerupdate answer with code to initialize the filtered array, and a new plunker demo. plnkr.co/NSvBz1yWvmeFgXITutZF
-
-
Fred about 10 yearsThanks for your quick answer but
$scope.filteredItems
is actually undefined in thegetIndexFromName()
function. Plunker updated: plnkr.co/edit/C8gL9qV1MyonTwDENO9L?p=preview -
j.wittwer about 10 yearsThat is because of the timing of your call to the getIndexFromName function in the controller. It occurs before the filter operation creates the filteredItems array.
-
Fred about 10 yearsThanks but what if I want to init the app by calling the
getIndexFromName()
function ? Isn't there a way without forcing the user to click on the button ? Maybe a way to wait until thefilteredItems
array is done ?