角JS過濾需要在對象屬性級別instaed對象級別爲NG重複

我試圖搜索與輸入文本輸入列表，角JS過濾需要在對象屬性級別instaed對象級別爲NG重複

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

我意識到，我的過濾器是在對象級搜索，而不是對象名稱屬性級別。我的意思是，如果我鍵入「a」，它應該搜索eachObj.name，而不是eachObj。如果每個對象的任何屬性都包含「a」，則表明只有當eachObj.name包含「a」時，纔會顯示該搜索結果。有沒有簡單的解決方法。

下面是我的示例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" 
    } 

]

來源

2015-10-05 Madasu K

您可以使用過濾器的對象符號。所以| filter:{<propName>:<Value>}搜索你的項目的屬性。

所以你的情況

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

將過濾其中object.name包含scope屬性by。

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

它在行動

見小提琴 http://jsfiddle.net/gfwex7jd/

來源

2015-10-05 13:16:12 ste2425

其實我已經使用了NG-重複再重複，當我用您的解決方案過濾器的下拉選項：{名稱：查詢}，沒有降下來選項是可見的。我用示例json和下拉列表編輯了這個問題。 –

原因是默認情況下，ng-model =「query」將爲空/空，因此沒有顯示下來的項目，只有搜索輸入框顯示在下拉項目下。 –

即使您未初始化'ng-model'參數，過濾器仍將顯示所有項目。在我的小提琴中將其從控制器中移除。它會顯示所有結果。我已經將你的html和數據結構複製到我的小提琴中，並且它可以正常工作。那是沒有你的下拉庫。瞭解可能導致問題的原因可能很有幫助。 http://jsfiddle.net/gfwex7jd/2/ – ste2425

角JS過濾需要在對象屬性級別instaed對象級別爲NG重複

回答

相關問題