角度 - 按单个ng模型过滤，但具有多个属性

Angular - filter by single ng-model, but on multiple properties?

本文关键字：属性 过滤 单个 ng 模型 角度      更新时间：2023-09-26

>我有以下输入数据：

  $scope.postList = [{
    name: "Hello World #1",
    is_published: false,
    targeting: false
  }, {
    name: "Hello World #2",
    is_published: true,
    targeting: true
  }, {
    name: "Hello World #3",
    is_published: true,
    targeting: true
  }, {
    name: "Hello World #4",
    is_published: false,
    targeting: true
  }];

现在，我应该能够从以下选择中过滤结果（使用 ng-repeat 显示）。

<select ng-model="filterByCriteria">
   <option ng-value="published">Published</option>
   <option ng-value="published">Unpublished</option>
   <option ng-value="targeting">Custom Targeting</option>
   <option ng-value="public">Public</option>
</select>

如您所见，"已发布/未发布"与is_published媒体资源相关，而"自定义定位/公开"与targeting媒体资源相关。

波兰语： http://plnkr.co/edit/Ej8qSGCUbts0RVVJspM1?p=preview

你可以做这样的事情：添加此新对象

$scope.filterByCriteria = [{
    is_published: true
}, {
    is_published: false
}, {
    targeting: true
}, {
    targeting: false
}];

并在 HTML 中

<body ng-app="myApp">
<div ng-controller="myController">
  <div>
    Filter by:
    <select ng-model="selectedCriteria">
      <option value="0">Published</option>
      <option value="1">Unpublished</option>
      <option value="2">Custom Targeting</option>
      <option value="3">Public</option>
    </select>
  </div>
  <ul>
    <li ng-repeat="post in postList | filter: filterByCriteria[selectedCriteria]">
      {{post.name}}
    </li>
  </ul>
</div>

这是一个例子

相关文章：