2015-11-04 218 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