使用AngularJS将选择过滤器应用于特定字段?

时间:2014-01-04 23:14:36

标签: javascript angularjs

如何使用单个选择状态,但根据所选的?

过滤不同的字段

使用:

<select name="status" ng-model="status">
    <option value="">All statuses</option>
    <option value="false">Unread</option>
    <option value="true">Read</option>
    <option value="false">Unpublished</option>
    <option value="true">Publish</option>
</select>

<li ng-repeat="message in messages | filter:status | orderBy:'-created_at' ">
    <p>
        <a href="#/messages/{{ message.id }}/">{{ message.message|truncate:100 }}</a>
        <a>{{ message.type }}</a>
    </p>
</li>

示例JSON:

  {
     "id":18,
     "type":"Complaint",
     "message":"Amet ad nihil dolore delectus ad. Ea quis sed rerum excepturi est ratione. Provident enim porro.",
     "read":false,
     "publish":false,
     "created_at":"1973-03-31 13:43:57",
     "updated_at":"2003-04-28 02:31:03"
  }

更多信息 我需要状态发布来查找所有message.publish = true,例如。特定于字段而不使用两个选择框... http://jsfiddle.net/lewiswharf/3a3DT/2/

1 个答案:

答案 0 :(得分:1)

您可以根据选择状态

将对象传递给过滤器表达式

在控制器中

$scope.messageFilterOptions = [
    { label: "All statuses", filterExp: {} },
    { label: "Unread", filterExp: { read: false } },
    { label: "Read", filterExp: { read: true } },
    { label: "Unpublished", filterExp: { publish: false } },
    { label: "Publish", filterExp: { publish: true } }
];

$scope.selectedMessageFilter = $scope.messageFilterOptions[0];

在视图中

<select ng-model="selectedMessageFilter" ng-options="o.label for o in messageFilterOptions"></select>
<ul>
<li ng-repeat="message in messages | filter: selectedMessageFilter.filterExp">
...

请参阅http://jsfiddle.net/TKq6L/