angularjs过滤器中的动态过滤器表达式答案

【问题标题】：Dynamic filter expression in angularjs filterangularjs过滤器中的动态过滤器表达式
【发布时间】：2014-12-11 10:27:47
【问题描述】：

我有一个对象数组，比如人员，人员对象具有姓名、年龄、性别等属性，并且我可以从人员对象中选择属性。我想根据从文本框中选择和输入的属性来过滤数组。

     <div ng-app="myApp" ng-controller="myCtrl" >

            <select ng-model="filterBy" ng-options=" p for p in person"  ng-init='person= ["name","age","gender"]' >  </select>

            <input type="text" ng-model="filterAs"> </input>


         <table>
       <tr>      
       <td>Name</td>
       <td>Age</td>
       <td>Group</td>
       </tr>  

       <tr  ng-repeat=" person in persons | filter:{  filterBy : filterAs   }  ">   
       <td> {{ person.Name }} </td>
       <td> {{ person.Age}} </td>
       <td> {{ person.Group}} </td>   
       </tr> 
       </table>
   </div>

【问题讨论】：

标签： angularjs angularjs-filter

【解决方案1】：

希望对你有帮助查看：

<select ng-model="key" ng-options=" key as key for (key,val) in persons[0]"  >  </select>
            <input ng-if ="key=='Name'" type="text" ng-model=search.Name> </input>
            <input ng-if ="key=='Age'"  type="text" ng-model=search.Age> </input>
            <input ng-if ="key=='Group'" type="text" ng-model=search.Group> </input>
         <table>
       <tr>
       <td ng-repeat= "p in person">{{p}}</td>
       </tr>  

       <tr  ng-repeat=" person in persons | filter:search">   
       <td> {{ person.Name }} </td>
       <td> {{ person.Age}} </td>
       <td> {{ person.Group}} </td>   
       </tr> 
       </table>

控制器：

controller("HelloController", function($scope) {

        $scope.persons=[
                        {Name:"vin",Age:"25",Group:"A"},
                        {Name:"Gok",Age:"26",Group:"B"}]
        $scope.key="Name"
        $scope.search={}

【讨论】：

【解决方案2】：

以下代码应满足您的要求。 Working Demo

</head>
<body ng-app="selectExample">
  <script>
angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];
    $scope.test=[
      {value:'name'},
      {value:'shade'}
      ]
    $scope.myColor = $scope.colors[2]; // red
    $scope.shownameandcolour=function() {

    }   
  }]);
</script>
<div ng-controller="ExampleController">



  Color (null not allowed):
  <select ng-model="myColor1" ng-options="t.value for t in test"  ng-change="shownameandcolour()"></select><br>
<br/>

  <ul> 
  <div ng-if="myColor1.value=='name'">
  <input ng-model="nameModel"><br>
    <li class="animate-repeat" ng-repeat="n in colors | filter:nameModel">
      {{n.name}}
    </li>
  </div>

    <div ng-if="myColor1.value=='shade'">
    <input ng-model="shadeModel"><br>
          <li class="animate-repeat" ng-repeat="n in colors | filter:shadeModel">
      {{n.shade}}
    </li>
    </div>
  </ul>

</div>
</html>

【讨论】：

示例：从 dropDowm 中选择姓名或电话作为选择标准，然后将姓名或电话放入搜索框。姓名，电话，年龄等属性进入下拉框。 vinod patidar 或 khalid Hussain 进入搜索框。在您的代码中，vinod patidar 或 khalid hussain 进入了没有尝试做的下拉菜单！