将选择过滤器应用于AngularJS的特定字段？

Question

How can I use a single select for statuses but filter different fields based on selected?

Use:

<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>

Example 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"
  }

More info I need status publish to find all message.publish = true , for example. Field specific without using two select boxes... http://jsfiddle.net/lewiswharf/3a3DT/2/

Answer 1

You can pass an object to the filter expression based on the select status

In the controller

$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];

In the view

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

See http://jsfiddle.net/TKq6L/