Use NG-Repeat expression as filter value

Question

i got a nice repeat that contains one column that is connected with a foreign key element so it looks like this that is want to extend with a search.

<input type="text" ng-model="search" placeholder="Search On Studio Name">

<div ng-repeat="cd in cds | filter : search">
 <div>{{cd.colorcode;}}</div>
 <div>{{cd.studio[0].name}}</div>
</div>

The problem is i don't get the filtered result on the studio name when i try to add as example:

| filter : search.{cd.studio[0].name}

How do i approach this second connected foreign key column?

As a separate question, i would like to filter the results as well with a button click as such (if/else) so if i press the button i will get all the "cd.studio[0].name" filtered directly with the first letter A, with a button like this

<button ng-click="letter='[A]'">A</button>
| filter : search.{cd.studio[0].name} OR letter: StartsWith

JB Nizet · Accepted Answer · 2016-04-18 16:35:47Z

3

Pass a predicate function to the filter, and implement this predicate function in the controller:

<div ng-repeat="cd in cds | filter : isAccepted">

$scope.isAccepted = function(cd) [
    return (cd.studio[0].name.toLowerCase().indexOf($scope.search.toLowerCase()) >= 0  || 
            ...);
};

edited Apr 18, 2016 at 16:35

answered Apr 18, 2016 at 15:02

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

7 Comments

JB Nizet Over a year ago

<sarcasm>If only errors came with an error message... We could know what the problem is instead of having to guess.</sarcasm> Post the error message.

Ewald Bos Over a year ago

hahaha ok ok true, here it is: angular.js:9997 TypeError: Cannot read property 'toLowercCase' of undefined -- I added this to the js: $scope.isAccepted = function(movie) { return (movie.ProgramMetadata[0].ProgramName.toLowerCase().indexOf($scope.search.toLowercCase()) >= 0); };

JB Nizet Over a year ago

That was a typo that is now fixed: toLowercCase -> toLowerCase. Your filter function also needs to deal with the case where the use didn't enter anything. I would initialize $scope.search to the empty string, instead of leaving it as undefined.

Ewald Bos Over a year ago

got another error now: $scope.search.toLowerCase is not a function

Ewald Bos Over a year ago

Thank you JB i got it to work, i had to change the angular version that apparently gave an error. The plnkr helped a lot thank you for your time and help. regards

|

Ahmad Mobaraki · Accepted Answer · 2016-04-18 15:06:55Z

0

you should use the filter like follow:

<input type="text" ng-model="search.studio[0].name" placeholder="Search On Studio Name">

<div ng-repeat="cd in cds | filter : search">
    <div>{{cd.colorcode;}}</div>
    <div>{{cd.studio[0].name}}</div>
</div>

and if you want to implement this with a button click:

<input type="text" ng-model="originalSearch.studio[0].name" placeholder="Search On Studio Name">
<button ng-click="searchFunc()" > Search it!</button>
<div ng-repeat="cd in cds | filter : finalSearch">
    <div>{{cd.colorcode;}}</div>
    <div>{{cd.studio[0].name}}</div>
</div>

in controller:

$scope.searchFunc = function(){
  $scope.finalSearch = $scope.originalSearch;
}

answered Apr 18, 2016 at 15:06

Ahmad Mobaraki

8,2485 gold badges54 silver badges75 bronze badges

3 Comments

Ewald Bos Over a year ago

I had this (( ng-model="search.studio[0].name" )) before as well but it gives me an error a such "angular.js:9997 TypeError: Cannot read property 'name' of undefined"

Ahmad Mobaraki Over a year ago

Are you sure cd.studio[0] exists !? try 'console.log(cds)' ?

Ewald Bos Over a year ago

yes it existsm i get the data correct in the ng-repeat if i just use search but i guess it searches all the available data since many times it looks like it does not make sense so i would like to search only on the studio name.

Collectives™ on Stack Overflow

Use NG-Repeat expression as filter value

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related