4

我正在尝试为过滤搜索建立一个对象。用户可以向搜索添加多个过滤器，并且可以多次添加具有不同值的相同过滤器。

用户会看到一个按钮来添加过滤器。添加的每个都显示从可用过滤器列表中填充的选择。

目前，当我添加两个相同的过滤器（即两个“过滤器 A”）时，它们都共享相同的基础价值。在选择框中选择过滤器时，如何使用 Angular 断开初始过滤器数组中的链接？

JSFiddle 这里

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({});
    };
});
4

1 回答 1

1

我认为 AngularJS 并没有像您期望的那样处理 select ng-model 指令。在这种情况下，它绑定到从过滤器数组中选择的过滤器对象。这就是为什么当您更改具有相同名称的过滤器的值时，所有具有该名称的过滤器都会看到更改，因为基础对象是相同的。

您在这里要做的是单独绑定过滤器值，而不是作为过滤器对象的一部分。

更改此行

<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-16T08:47:53.207 回答