ng-repeat：按单个字段过滤

12 回答

• 167

  请参阅filter页面上的示例 . 使用对象，并在color属性中设置颜色：

  Search by color: <input type="text" ng-model="search.color">
  <div ng-repeat="product in products | filter:search">
  

  回复于 2024-04-24T20:54:33+08:00
• 4

  指定要应用过滤器的属性（即 colour ）：

  <div ng-repeat="product in products | filter:{ colour: by_colour }">
  

  回复于 2024-04-24T20:54:33+08:00
• 16

  您可以通过具有与您必须在其上过滤的对象匹配的属性的对象进行过滤：

  app.controller('FooCtrl', function($scope) {
     $scope.products = [
         { id: 1, name: 'test', color: 'red' },
         { id: 2, name: 'bob', color: 'blue' }
         /*... etc... */
     ];
  });
  

  <div ng-repeat="product in products | filter: { color: 'red' }">
  

  正如Mark Rajcok所说，这当然可以通过变量传递 .

  回复于 2024-04-24T20:54:33+08:00
• 0

  如果要对给定对象的孙（或更深）进行过滤，可以继续构建对象层次结构 . 例如，如果要对'thing.properties.title'进行过滤，则可以执行以下操作：

  <div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">
  

  您还可以通过将对象添加到过滤器对象来过滤对象的多个属性：

  <div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">
  

  回复于 2024-04-24T20:54:33+08:00
• 9

  最好的方法是使用一个函数：

  html

  <div ng-repeat="product in products | filter: myFilter">
  

  javascript

  $scope.myFilter = function (item) { 
      return item === 'red' || item === 'blue'; 
  };
  

  或者，您可以使用ngHide或ngShow根据特定条件动态显示和隐藏元素 .

  回复于 2024-04-24T20:54:33+08:00
• 4

  小心角度滤镜 . 如果要在字段中选择特定值，则无法使用过滤器 .

  例：

  javascript

  app.controller('FooCtrl', function($scope) {
     $scope.products = [
         { id: 1, name: 'test', color: 'lightblue' },
         { id: 2, name: 'bob', color: 'blue' }
         /*... etc... */
     ];
  });
  

  html

  <div ng-repeat="product in products | filter: { color: 'blue' }">
  

  这将选择两者，因为使用像 substr 这样的东西
  这意味着你想要选择产品"color"包含字符串"blue"而不是"color"是"blue" .

  回复于 2024-04-24T20:54:33+08:00
• 453

  按颜色搜索：

  <input type="text" ng-model="searchinput">
  <div ng-repeat="product in products | filter:{color:searchinput}">
  

  你也可以做内巢 .

  filter:{prop1:{innerprop1:searchinput}}
  

  回复于 2024-04-24T20:54:33+08:00
• 560

  如果您要执行以下操作：

  <li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                  id="{{item.id}}">
      <span class="item-title">{{preference.itemTitle}}</span>
  </li>
  

  ...你不仅会获得itemTypeId 2和itemStatus 1的项目，而且还会获得itemType为20,22,202,123和itemStatus 10,11,101,123的项目 . 这是因为过滤器：{.. . }语法就像一个包含查询的字符串 .

  但是，如果您要添加：true条件，它将按完全匹配进行过滤：

  <li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                  id="{{item.id}}">
      <span class="item-title">{{preference.itemTitle}}</span>
  </li>
  

  回复于 2024-04-24T20:54:33+08:00
• 1

  我的方式是这样的

  subjcts is
  
  [{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]
  

  sub是输入字段或您喜欢的任何内容

  像这样显示

  <div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>
  

  回复于 2024-04-24T20:54:33+08:00
• 101

  您必须使用 filter:{color_name:by_colour} 而不是

  filter:by_colour
  

  如果要与对象的单个属性匹配，则写入该属性而不是对象，否则其他一些属性将匹配 .

  回复于 2024-04-24T20:54:33+08:00
• 91

  在过滤器中指定要应用过滤器的对象的属性：

  //Suppose Object
  var users = [{
    "firstname": "XYZ",
    "lastname": "ABC",
    "Address": "HOUSE NO-1, Example Street, Example Town"
  },
  {
    "firstname": "QWE",
    "lastname": "YUIKJH",
    "Address": "HOUSE NO-11, Example Street1, Example Town1"
  }]
  

  But you want to apply filter only on firstname

  <input type = "text" ng-model = "first_name_model"/>
  <div ng-repeat="user in users| filter:{ firstname: first_name_model}">
  

  回复于 2024-04-24T20:54:33+08:00
• 61

  如果您想要过滤一个字段：

  label>Any: <input ng-model="search.color"></label> <br>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
  

  如果要为所有字段筛选：

  label>Any: <input ng-model="search.$"></label> <br>
   <tr ng-repeat="friendObj in friends | filter:search:strict">
  

  和https://docs.angularjs.org/api/ng/filter/filter对你有好处

  回复于 2024-04-24T20:54:33+08:00