AngularJS scope variable for object in filter

Question

I'm trying to change which property I'm filtering by assigning the property name to a variable, but it's not working. Is there a way to accomplish this without writing my own filter? codepen

<div ng-app="app" ng-controller="main as m">
  <input ng-model="keyword"/>
  <p>Property: {{m.property}}</p> <!-- resolves to 'name' -->
  <!-- does not work-->
  <div ng-repeat="o in m.objects | filter:{m.property:keyword}">
    {{o.name}}
  </div>
  <hr/>
  <!-- works-->
  <div ng-repeat="o in m.objects | filter:{name:keyword}">
    {{o.name}}
  </div>
</div>

Trevor · Accepted Answer · 2015-01-21 19:11:13Z

2

If I understand your question right, I think this is what you are looking for.

Relevant code:

HTML:

<select ng-model="property" ng-change="clearSearch()">
  <option>name</option>
  <option>age</option>
  <option>city</option>
</select>

<input ng-model="search[property]" />

<div class="box">
  <div class="item" ng-repeat="item in data | filter:search">
    {{item.name}} | {{item.age}} | {{item.city}}
  </div>
</div>

Javascript:

var app = angular.module("myapp", []);
app.controller("main", function($scope){
  $scope.search = {};
  $scope.clearSearch = function(){
    $scope.search.name = "";
    $scope.search.age = "";
    $scope.search.city = "";
  }
  $scope.property = "name";
  $scope.data = [
      {
        name: "Robert",
        age: 23,
        city: "Orem"
      },
      {
        name: "Alice",
        age: 44,
        city: "Nephi"
      },
      {
        name: "Susan",
        age: 12,
        city: "Odgen"
      },
      {
        name: "Henry",
        age: 63,
        city: "South Jordan"
      },
      {
        name: "Frank",
        age: 35,
        city: "Provo"
      },
      {
        name: "Albert",
        age: 32,
        city: "Payson"
      },
  ];
});

answered Jan 21, 2015 at 19:11

Trevor

13.5k13 gold badges82 silver badges105 bronze badges

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

1 Comment

azium Over a year ago

Perfect! You're a boss =D

maxisam · Accepted Answer · 2015-01-21 18:56:26Z

1

In short, <div ng-repeat="o in m.objects | filter:{m.property:keyword}"> {m.property:keyword} is not a correct expression

answered Jan 21, 2015 at 18:56

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

8 Comments

azium Over a year ago

I gathered that, filter:{name:keyword} IS a proper expression, so I'm wondering how I achieve what the code looks like it would expect to achieve. Since m.property == 'name', It seems like it would work.

maxisam Over a year ago

because m.property == 'name' is a correct expression. You should read the ref link I just added

azium Over a year ago

That doesn't answer my question still... I'm not asking how to create proper expressions, I'm asking how to filter objects by a variable property name using angular's out of box filter

Trevor Over a year ago

You may not be asking how to create proper expressions, but often times reading ancillary material can provide the necessary insight into why your code isn't working. Be careful not to brush aside links like @maxisam's to quickly, especially when they come from an experienced developer (he's got nearly 10,000 points after all); I've solved many programming problems by reading what seemed initially like irrelevant information.

maxisam Over a year ago

Expression is somehow like Javascript. You don't expect to create an object like {m.property:keyword}

|

j.hwang · Accepted Answer · 2015-01-21 18:55:11Z

0

Have you tried filter without the "m." in "m.property"?

<div ng-repeat="o in m.objects | filter:{property:keyword}">

answered Jan 21, 2015 at 18:55

j.hwang

11 bronze badge

1 Comment

azium Over a year ago

No that doesn't work as well, it doesn't matter if I'm using ng-controller='ctrlName as name' syntax or $scope syntax, trying to use a scope variable for the property to filter on doesn't work.

Collectives™ on Stack Overflow

AngularJS scope variable for object in filter

3 Answers 3

1 Comment

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related