1

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
Improve this question

2 Answers 2

Reset to default
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 || ...); };
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

<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.
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); };
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.
got another error now: $scope.search.toLowerCase is not a function
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
|
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; }
Improve this answer

3 Comments

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"
Are you sure cd.studio[0] exists !? try 'console.log(cds)' ?
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.