AngularJS - 從一組過濾對象中構建過濾搜索

我正在嘗試爲過濾的搜索構建一個對象。用戶可以向搜索添加多個過濾器，並可以使用不同的值多次添加相同的過濾器。AngularJS - 從一組過濾對象中構建過濾搜索

向用戶呈現用於添加過濾器的按鈕。添加的每一個都顯示了從可用過濾器列表填充的選擇。

此刻，當我添加兩個相同的過濾器（即兩個'過濾器A'）時，它們都共享相同的基礎值。在選擇框中選擇過濾器時，如何使用Angular打破初始過濾器數組中的鏈接？

HTML

<div ng-app="myApp"> 
<div ng-controller="MyCtrl"> 
    <button data-ng-click="addFilter()">Add Filter</button> 
    <div data-ng-repeat="c in current.filters"> 
     <div class="select-box"> 
      <select data-ng-model="c.filter" data-ng-options="filter.name for filter in filters"></select> 
      <input type="text" placeholder="Filter value" data-ng-model="c.filter.value">     
     </div> 
    </div> 
    <pre>{{current | json}}</pre> 
</div>

的JavaScript

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

app.controller('MyCtrl', function($scope) { 
    $scope.current = {"filters":[]}; 
    $scope.filters = [ 
     {"id":"1", "name":"Filter A", "value":""}, 
     {"id":"2", "name":"Filter B", "value":""}, 
     {"id":"3", "name":"Filter C", "value":""}, 
     {"id":"4", "name":"Filter D", "value":""} 
    ]; 

    $scope.addFilter = function() { 
     $scope.current.filters.push({}); 
    }; 
});

來源

2013-07-16 jwest

我認爲，你期望它AngularJS不處理的選擇NG-模型的指令。在這種情況下，它將綁定到filters數組中的選定過濾器對象。這就是爲什麼當您更改具有相同名稱的過濾器的值時，所有具有該名稱的過濾器都會看到更改，因爲底層對象是相同的。

你在這裏要做的是自己綁定過濾器的值，而不是作爲過濾器對象的一部分。

改變這一行

<input type="text" placeholder="Filter value" data-ng-model="c.filter.value">

到

<input type="text" placeholder="Filter value" data-ng-model="c.value">

你也不需要定義「價值」字段爲每一個過濾器了。

更新的代碼：http://jsfiddle.net/HyRUV/5/

來源

2013-07-16 08:47:53 Ma3x

完美 - 我知道我錯過了一些簡單的東西。謝謝！ – jwest

@jwest：我提出了一個值命名錯誤讓我編輯上面的代碼 – Ma3x

@jwest：查看更新的代碼。現在它應該做你想要的。此外，字段名稱與現在的原始代碼相同。過濾器綁定到基礎過濾器對象，並且值分別綁定。 – Ma3x

AngularJS - 從一組過濾對象中構建過濾搜索

回答

相關問題