Упорядочить поиск, используя Угловой фильтр JS

Question

Я новичок в угловых js. Я использую параметр углового js-фильтра. Как применить вариант фильтра для следующих Дива

<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> 

Пример: Когда типа пользователя ник на поле поиска, а затем только <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div> это нужно показать $ два других DIV это нужно скрывать. я вижу эту документацию https://docs.angularjs.org/api/ng/filter/filter. Пожалуйста помоги .

UPDATE: Для того, чтобы выполнить эту задачу без угловых JS Пожалуйста, обратитесь Jquery search using real time input , like Filter option in Angular JS

Answer 1

Использование ng-repeat, в сочетании с filter. Пока вы показываете каждый элемент, хранящийся в вашей модели $scope, с помощью ng-repeat, вы можете просто фильтровать их с помощью поля ввода. Указанная модель в вашем поле ввода, связанная с соответствующим фильтром, сделает трюк.

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