Question

我是棱角分明的新手。我喜欢角度js过滤器选项。如何为以下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>

示例：当用户在搜索框中键入nick时，只需要显示$ {其他两个div需要隐藏<div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>。我看到了这份文件https://docs.angularjs.org/api/ng/filter/filter。请帮忙。

更新：没有Angular js执行此任务请参阅 Jquery search using real time input , like Filter option in Angular JS

Answer 1

使用ng-repeat，并结合filter。当您通过$scope显示存储在ng-repeat模型中的每个项目时，您只需使用输入字段对其进行过滤即可。输入字段中的指定模型与适当的过滤器绑定将起到作用。

标记

<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

使用Angular JS过滤器

1 个答案: