对象级别的对象属性级别需要角度js过滤以进行ng重复

时间:2015-10-05 13:08:53

标签: angularjs angularjs-ng-repeat angular-filters

我正在尝试使用输入文本条目

搜索列表
<input disable-auto-close  type="text" class="form-control" placeholder="Query" ng-model="query" stop-event />
</div>
</li>
<li role="presentation" ng-repeat="eachObj in objList | filter:query" >
   <a class="dd-li-item" role="menuitem" tabindex="-1" >
      {{eachObj.name}}      
   </a>
</li>

我意识到我的过滤器是在对象级别搜索,而不是对象名称属性级别。我的意思是,如果我输入&#34; a&#34;,它应该搜索eachObj.name,而不是eachObj。如果eachObj的任何属性包含&#34; a&#34;然后它显示,只有当eachObj.name包含&#34; a&#34;然后只有它应该显示该名称。是否有任何简单的解决方法。

以下是我的样本json和下拉列表:

<div class="dropdown">
   <div class="smp-list-selected btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
      <div class="smp-list-selected-label">{{sampleCtrl.dropdownSelectedLabel}}</div>
      <div class="caret dropdown-caret"></div>
      <div class="subscript-indicator" ng-if="sampleCtrl.isQualified(sampleCtrl.selectedsmp.id)">Qualified</div>
   </div>
   <ul class="dropdown-menu smp-list" role="menu" aria-labelledby="dropdownMenu1" auto-close="outsideClick">
      <li role="presentation" >
         <div class="input-group input-group-sm search-control-for-smps"> <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
            </span>
            <input disable-auto-close  type="text" class="form-control" placeholder="Query" ng-model="query" stop-event />
         </div>
      </li>
      <li role="presentation" ng-repeat="smpObj in sampleCtrl.smpList | filter:{name:query} " ng-click="sampleCtrl.selectsmp(smpObj)">
         <a class="dd-li-item" role="menuitem" tabindex="-1" >
            {{smpObj.name}}
            <div class="subscript-indicator" ng-if="sampleCtrl.isQualified(smpObj.id)">Qualified</div>
         </a>
      </li>
   </ul>
</div>

 vm.smpList = [
  {
    "id": "3",
    "name": "Check",   
    "status": "Sent"
  },
  {
    "id": "4",
    "name": "Tupper",    
    "status": "In"
  },
  {
    "id": "8",
    "name": "Dangi",    
    "status": "Out"
  }

]

1 个答案:

答案 0 :(得分:0)

您可以使用过滤器的对象表示法。因此| filter:{<propName>:<Value>}可以搜索商品的属性。

所以在你的情况下

<div ng-repeat="item in items | filter:{name:by}">

将过滤object.name包含范围属性by

的位置

https://docs.angularjs.org/api/ng/filter/filter

看到它在行动中的小提琴 http://jsfiddle.net/gfwex7jd/