2015-11-04 219 views
1

我想根據在下拉列表中選擇的條件過濾表格。在newList函數中寫val不會過濾表。任何建議如何通過這個。在angularjs中動態設置過濾器

  • HTML

    <tbody> 
    
        <tr ng-repeat="friendObj in newfriends"> 
    
        <td>{{friendObj.name}}</td> 
    
        <td>{{friendObj.phone}}</td> 
    
        <td>{{friendObj.age}}</td> 
        </tr> 
    
    </tbody> 
    

    • JS

      $scope.newList = function (val) { 
           alert(val); 
      $scope.newfriends = $filter('filter')($scope.friends, { 
          val: $scope.searcha 
      }) 
      
+0

Plunkr鏈接:http://plnkr.co/edit/3yOmiIJ9Yu9RfAgmuVA7 –

+0

如果您創建了正確的搜索模型,如search.name,那麼您不需要在控件中使用「$ filter」請檢查我的答案。 – Reza

回答

1

根據你的代碼,您試圖多次添加標準,那麼你想用這些標準來篩選。

在你的JSON中只有3個屬性。 {姓名,電話和年齡}。

所以你的標準不應該超過3行,它不應該有同樣的事情兩次。 如果你這樣做,你需要建立你自己的過濾器。 使用下面的代碼

$scope.newList = function() { 
    var searchBy = {}; 
    angular.forEach($scope.newCriteria, function(criteria, key) { 
    searchBy[criteria.name] = criteria.value; 
    }); 
    $scope.newfriends = $filter('filter')($scope.friends, searchBy); 
} 

和HTML如下

<div id="searchy"> 

<ul class="list-unstyled"> 
    <li style="display: inline-block" ng-repeat="crtia in newCriteria"> 
    <table> 
     <tr> 

     <td> 
      <select ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select> 
     </td> 
     <td> 
      <input ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" /> 
     </td> 

     </tr> 
    </table> 
    </li> 
</ul> <button ng-click="searchy.generate()">Add Criteria</button> </div> 

這裏是更新plunker。 http://plnkr.co/edit/r5OcI366dyvLQ24fFIje?p=preview

+0

searchBy [value.name] = value.value;你能告訴我這個陳述是什麼嗎 –

+0

newCriteria是包含多個{name,value}對象的標準數組。在應用過濾器時,您需要構建一個對象,例如{age:18}。年齡是您的標準名稱,18是價值。所以我做了。 searchBy [value.name] = value.value。 [這裏的第一個值是newCriteria的每個實例],第二個值是18(由用戶輸入)。修改代碼示例以便更好地理解。 –

0

大概要根據下拉選擇過濾器,然後創建適當的搜索模式一樣

<select ng-model="selectedsearchcriteria" 
     ng-options="searchopt for searchopt in searchcriteria "></select> 

<!--When you select dropdown 'selectedsearchcriteria' update like 'name', 'age' and so on 
then ng-model="search[selectedsearchcriteria]" forms like search.name, search.age and so on--> 
<input name="search" ng-model="search[selectedsearchcriteria]" placeholder="{{selectedsearchcriteria}}" /> 

<!--Here 'filter:search:strict' filter like search.name it is like property based filter--> 

<tr ng-repeat="friendObj in newfriends |filter:search:strict"> 

此外我認爲你不需要在你的控制器使用$filter('filter')

檢查update plunker

+0

其實我不得不在控制器中過濾 –

+0

但是您編寫的'$ scope.newList = function()'內部的代碼可以在控制器中無需過濾的情況下實現。如果你想顯示已經選擇的過濾器,使用'search'對象。 – Reza