有角度的js條件搜索

我希望搜索框根據所選的適當單選按鈕按名稱或按城市搜索。但是，它顯示的列表將包含名稱 - 城市對。我試過ng-if和ng-true-value和mg-false-value，但它不起作用。有什麼建議麼？下面的代碼：有角度的js條件搜索

<html ng-app="demoApp"> 
    <head> 
     <script type="text/javascript" src="angular.min.js"></script> 
    </head> 
    <body ng-controller="DemoController"> 
     Search: <br/> 
     <input type="text" ng-model="name"/> {{name}} 

     <br/><br/> 
     <input type="radio" ng-model="search.name" ng-value="search.name" name="search" > By Name </input> &nbsp;&nbsp;&nbsp; 
     <input type="radio" ng-model="search.city" ng-value="search.city" name="search" > By City </input> 

     <ul> 
      <li ng-repeat="friend in friends| filter:search.name:friend.name | filter:search.city:friend.city ">{{friend.name}} - {{friend.city}} </li> 
     </ul> 
     <script> 

     var demoApp = angular.module('demoApp',[]); 

     demoApp.controller('DemoController', function($scope){ 
      $scope.friends = [ 
       {name:'Akshay',city:'Hyderabad'}, 
       {name:'Peeyush',city:'Madras'}, 
       {name:'Aditya',city:'Mumbai'} 
      ]; 
     }); 
     </script> 
    </body> 
</html>

來源

2014-04-12 user3527350

一種方法是動態創建由filter濾波器所需的對象。每當選擇「按名稱」時添加手錶，相關對象將獲得屬性name，其中包含文本搜索的值;每當選擇「按城市」時，對象將獲得city屬性。

簡化代碼：

（HTML）

<div> 
    Search: <input type="text" ng-model="search.text" /> 

    <input type="radio" ng-model="search.field" ng-value="'name'" name="sfld">By Name</input> 
    <input type="radio" ng-model="search.field" ng-value="'city'" name="sfld">By City</input> 

    <ul> 
     <li ng-repeat="friend in friends | filter:filterObj">...</li> 
    </ul> 
</div>

（JS）

$scope.$watch("search.field", function(newval) { 
    if(newval) { 
     $scope.filterObj = {}; 
     $scope.filterObj[$scope.search.field] = $scope.search.text; 
    } 
    else { 
     $scope.filterObj = null; 
    } 
}); 
$scope.$watch("search.text", function(newval) { 
    if($scope.search.field) $scope.filterObj[$scope.search.field] = $scope.search.text; 
});

小提琴：http://jsfiddle.net/97Db6/

來源

2014-04-12 19:28:21

既然你提到想用ng-if做到這一點，在這裏一個簡單的方法，可以工作：

<input type="radio" ng-model="search" value="name" name="search">By Name 
<input type="radio" ng-model="search" value="city" name="search">By City 

<ul> 
    <li ng-if="search == 'name'" ng-repeat="friend in friends | filter: {name : name}">{{friend.name}}, {{friend.city}}</li> 
    <li ng-if="search == 'city'" ng-repeat="friend in friends | filter: {city : name}">{{friend.name}}, {{friend.city}}</li> 
</ul>

演示：http://plnkr.co/veqpknH9LR25G3e6QDPV

來源

2014-04-12 19:31:56

有角度的js條件搜索

回答

相關問題