angularjs：動態更改過濾器選項

我想要的是類似this文檔中的示例，但具有可以發揮「any」，「name」或「phone」屬性的過濾功能的唯一輸入，角色由錨點擊完成。以下是準備好的代碼http://jsfiddle.net/ubugnu/QuyCU/如何動態更新ng-model屬性？angularjs：動態更改過濾器選項

HTML

<div ng-app> 
    <div ng-controller="MainCtrl"> 

     <label>Any</label> <input type="text" ng-model="search.$"> <br> 
     <label>Name only</label> <input type="text" ng-model="search.name"><br> 
     <label>Phone only</label> <input type="text" ng-model="search.phone"><br> 

     <div style="background-color:#FAE8F1"> 
     <hr> 

     <label>Filter</label> <input type="text" ng-model="search.$"> by {{filter}} <br> 
     <ul> 
     <li><a href="" ng-click="changeFilterTo('$')">Any</a></li> 
     <li><a href="" ng-click="changeFilterTo('name')">By Name</a></li> 
     <li><a href="" ng-click="changeFilterTo('phone')">By phone</a></li> 
     </ul> 

     <hr> 
     </div> 

     <table class="table"> 
     <tr><th>Name</th><th>Phone</th></tr> 
     <tr ng-repeat="friend in friends | filter:search"> 
      <td>{{friend.name}}</td> 
      <td>{{friend.phone}}</td> 
     </tr> 
     </table> 
    </div> 
</div>

function MainCtrl($scope, $http) { 
    $scope.friends = [{name:'John', phone:'555-1276'}, 
         {name:'Mary', phone:'800-BIG-MARY'}, 
         {name:'Mike', phone:'555-4321'}, 
         {name:'Adam', phone:'555-5678'}, 
         {name:'Julie', phone:'555-8765'}]; 
    $scope.filter = "$"; 
    $scope.changeFilterTo = function(pr) { 
     $scope.filter = pr; 
    } 
};

來源

2013-06-26 ubugnu

可以定義ng-model像：ng-model="search[filter]"動態改變到哪個變量應當綁定（其中filter是另一個$scope變量）。

見琴： http://jsfiddle.net/lopisan/vzQKk/1/

則必須將此行添加到控制器：

$scope.search = {name:'', phone:'', $:''};

，並更改輸入：

<input type="text" ng-model="search[filter]">

來源

2013-06-26 12:24:23 lopisan

優秀，非常感謝 – ubugnu

這並不完全工作，在小提琴...嘗試尋找另一種簡單的方法'a'並點擊'電話'。無論點擊的鏈接如何，它似乎都在搜索「全部」。不過，我認爲它只需要一小部分的調整即可。 –

我認爲它工作正常，但也許以一種非直觀的方式（但它很好地演示瞭解決方案） - 當您單擊「任何|按名稱|通過電話」時，它只是將底部文本框鏈接到相應的上部文本框之一。因此，輸入'a'填充到'Any'並點擊'通過電話'將底部文本框切換到「電話」，所以下一次輸入添加電話限制，只留下「任何」限制。 – lopisan

這裏有一個方法 - 有可能是別人。

<div ng-app> 
    <div ng-controller="MainCtrl"> 
     <div style="background-color:#FAE8F1"> 
     <hr> 

     <label>Filter</label> <input type="text" ng-model="multi"> by {{filter}}   <br> 
     <ul> 
     <li><a href="" ng-click="changeFilterTo('$')">Any</a></li> 
     <li><a href="" ng-click="changeFilterTo('name')">By Name</a></li> 
     <li><a href="" ng-click="changeFilterTo('phone')">By phone</a></li> 
     </ul> 

     <hr> 
     </div> 

     <table class="table"> 
     <tr><th>Name</th><th>Phone</th></tr> 
     <tr ng-repeat="friend in friends | filter:getFilter()"> 
      <td>{{friend.name}}</td> 
      <td>{{friend.phone}}</td> 
     </tr> 
     </table> 
    </div> 
</div>

的Javascript：

function MainCtrl($scope, $http) { 
    $scope.friends = [{name:'John', phone:'555-1276'}, 
         {name:'Mary', phone:'800-BIG-MARY'}, 
         {name:'Mike', phone:'555-4321'}, 
         {name:'Adam', phone:'555-5678'}, 
         {name:'Julie', phone:'555-8765'}]; 
    $scope.filter = "$"; 
    $scope.multi = ""; 
    $scope.changeFilterTo = function(pr) { 
     $scope.filter = pr; 
    } 
    $scope.getFilter = function() { 
     switch ($scope.filter) { 
      case 'name': 
       return {name: $scope.multi}; 
      case 'phone': 
       return {phone: $scope.multi}; 
      default: 
       return {$: $scope.multi} 
     } 
    } 
};

來源

2013-06-26 12:28:27

非常感謝:-) – ubugnu

下面是使用單選按鈕

<input type="text" ng-model="search[filter]"> 

<label>filter by these</label> 

<label>Any <input type="radio" ng-model="filter" ng-init="filter = '$'" value="$"></label> 
<label>name<input type="radio" ng-model="filter" value="name"></label> 
<label>phone<input type="radio" ng-model="filter" value="phone"></label>

來源

2016-05-17 13:58:24 Mangopop

angularjs：動態更改過濾器選項

回答

相關問題