如何过滤angularjs中的数据? [英] How to filter the data in angularjs?

问题描述

我正在尝试根据 firstname 和 title 属性过滤数据，但它没有过滤.

 按名称<input type="text" ng-model="searchText.data.firstname"></label>|<标签>按标题<选择名称=标题"><option value="">All</option><option value="">区域管理器</option><option value="">物流代理</option></select></label><小时/><div ng-repeat="acct_list 中的accDetails | filter:searchText">{{accDetails.data.firstname}} |{{accDetails.data.lastname}} |{{accDetails.title}}

JSON 数据为:

$scope.acct_list = {0":{数据": {"firstname": "maeli","lastname": "疯了",//...},"title": "店铺"},1":{数据": {//...},"title": "酒店"}}

这是我的 plnkr

解决方案

过滤不起作用的原因是因为 filter 只适用于数组，而你的 acct_list不是数组.

您可以将数据更改为数组:

$scope.acct_list = [{数据": {"firstname": "maeli","lastname": "疯了",//...},"title": "店铺"},{...}]

或者，在控制器中排列成一个数组，然后在其上ng-repeat.

这是另一个相关的SO问题关于这个话题.

另外，不要忘记将 ng-model="searchText.title" 添加到您的 <select> 并填写 <option> 相应的值.

I am trying to filter the data according to firstname and title properties but it's not filtering.

<label>by Name 
  <input type="text" ng-model="searchText.data.firstname"></label> |

<label>by Title
  <select name="title">
    <option value="">All</option>
    <option value="">Zone Manager</option>
    <option value="">Logistic agent</option>
  </select></label>

<hr/>

<div ng-repeat="accDetails in acct_list | filter:searchText">
   {{accDetails.data.firstname}} |
   {{accDetails.data.lastname}} | 
   {{accDetails.title}}

</div>

The JSON data is:

$scope.acct_list = {
  "0": {
    "data": {
        "firstname": "maeli",
        "lastname": "mad",
        //...
    },
    "title": "Shop"
  },
  "1": {
    "data": {
        //...
    },
    "title": "hotel"
  }
}

Here is my plnkr

解决方案

The reason that filtering doesn't work is because filter only works on arrays, and your acct_list is not an array.

You can either change your data to an array:

$scope.acct_list = [
  {
    "data": {
        "firstname": "maeli",
        "lastname": "mad",
        //...
    },
    "title": "Shop"
  },
  {
    ...
  }
]

or, arrange into an array in the controller and ng-repeat over that.

Here's another relevant SO question on this topic.

Also, don't forget to add ng-model="searchText.title" to your <select> and fill-in the <option> values accordingly.

这篇关于如何过滤angularjs中的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！