1

i am new to angular js . I lkie the angular js filter option. How to apply filter option for following div 

 <div class="block-parent" ng-app="">
  <input type="text" name="search">
  <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
  <div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
  <div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>

Example: When user type nick on search box then only <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div> is need to show $ other two div is need to hide . i see this documentation https://docs.angularjs.org/api/ng/filter/filter . Please help .

UPDATE : To do this task without Angular js Please refer Jquery search using real time input , like Filter option in Angular JS

Community
  • 1
  • 1
  • your question is showing a bit of misunderstanding of how Angular works. Angular is able to perform operations on **JavaScript variables**, which may include filtering, sorting, and rendering to HTML. It ***does not*** perform operations on **HTML** ***directly***. – Claies Nov 06 '16 at 13:49
  • could you please suggest a good solution ? –  Nov 07 '16 at 05:53
  • Aside from using a JavaScript array to hold your data, as Aer0 indicated in his answer? As I suggested in my previous comment, if you are not manipulating **data**, then Angular is not the right framework to accomplish the task. And for sure, using a filter against HTML is the wrong approach; filters are for creating subsets of iteratable content, like arrays, which is why they work good with `ng-repeat`, which is designed to display iteratables. – Claies Nov 07 '16 at 05:55
  • which is the other good method ? if angular is not good for this please check http://stackoverflow.com/questions/40458669/applying-jquery-for-search –  Nov 07 '16 at 05:57
  • I don't do any work with jquery, I'm afraid, I won't be much help with that question. However, it seems like that is a duplicate of this question, just with different tags; that's not going to help you get an answer. Also, you haven't *really* shown enough code here to understand where your data that is populating the HTML is coming from in the first place; You have a comment that suggests the data has "1000 of answer" but it's doubtful that that was hand generated; perhaps the filter should be applied where the data is generated (server maybe?). – Claies Nov 07 '16 at 05:59
  • please see the answer for this question http://stackoverflow.com/questions/40458669/jquery-search-using-real-time-input-like-filter-option-in-angular-js –  Nov 07 '16 at 07:31

1 Answers1

0

Use ng-repeat, combined with filter. While you display each item stored in your $scopes model through ng-repeat you can just filter them by using a input field. A specified model in your input field tied up with a proper filter will do the trick.

Markup

<div ng-app="demo" ng-controller="ctrl">
  <input type="text" ng-model="search">
  <div class="block-parent" ng-repeat="answer in answers | filter: search">
    {{ answer }}
  </div>
</div>

JS

angular.module('demo', [])
.controller('ctrl', function($scope) {
  $scope.answers = [
    'Nick',
    'Sam',
    'John'
  ]
})

Demo

Aer0
  • 3,792
  • 17
  • 33
  • thank you for solution friend . But the thing is that i can't make $scope.answers = [ 'Nick', 'Sam', 'John' ] because there are 1000 of answer in the real html and the html structure is already defined so i can't use this
    {{ answer }}
    also .So please write other method and keep this method also .     –  Nov 06 '16 at 12:58
  • Why not rewrite the structure? Any other solution, using DOM manipulation, could lead to drastic performance issues. Especially if you use thousands of entries. – Aer0 Nov 06 '16 at 13:02
  • actually your answer is very good . But i want answer like @Sajeetharan did . But in his answer he did a mistake . Could you please help to rewrite it . First we need to load 3 name . Then if some one type nick or any name if that name is present then need to show that name only –  Nov 06 '16 at 13:04