Apply select filter to specific fields with 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/

I can't wrap my head around the issue...could you make a demo? and maybe give me details on exactly what should happen? — m59
– m59, Commented Jan 4, 2014 at 23:21
I need status publish to find all message.publish = true, for example. Field specific without using two select boxes... jsfiddle.net/lewiswharf/3a3DT/2 — Mark Lewis
– Mark Lewis, Commented Jan 5, 2014 at 0:07

LostInComputer · Accepted Answer · 2014-01-05 04:23:34Z

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/

answered Jan 5, 2014 at 4:23

LostInComputer

15.5k4 gold badges44 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Lewis Over a year ago

Cheers! Also added $scope.selectedMessageFilter = $scope.messageFilterOptions[0]; to change angularjs's default empty option.

Collectives™ on Stack Overflow

Apply select filter to specific fields with AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related