Question

我有一个模板，其中我有行，每行有两个元素，每个元素都有不同的类，所以我有像我这样的Html结构（简化）

<div ng-repeat "row in deals">
  <div class="deal-title-left">{{row[0].title}}</div>
  <div class="deal-title-right">{{row[1].title}}</div>
</div>

我想添加一个搜索框功能，该功能将使用实时搜索来完成交易标题。我尝试过使用ng-model =＆＃34;搜索＆＃34;并在行div中添加搜索过滤器，但如何将模型应用于每个单独的交易而不是整行？

Answer 1

演示：http://plnkr.co/edit/zGYLPcPHTr1TOSZTIBI2?p=preview

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <input type="text" ng-model="search"/>
  <div ng-repeat="row in deals | filter :{title:search}">
  <div class="deal-title-left">{{row.title}}</div>

</div>
  </body>

</html>

JS：

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.deals = [{
      title: "Cola for free"
    }, {
      title: "Icecream for free"
    }, {
      title: "Tee for free"
    },


  ]
});

行迭代器上的角度实时搜索过滤器

1 个答案: