AngularJS – 从一组过滤器对象构建过滤搜索

向用户显示添加过滤器的按钮.添加的每个都显示从可用过滤器列表中填充的选择.

目前,当我添加两个相同的过滤器(即两个’过滤器A’)时,它们都共享相同的基础值.当在选择框中选择过滤器时,如何使用Angular来断开初始过滤器数组的链接？

JSFiddle Here

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",{"id":"3","name":"Filter C",{"id":"4","name":"Filter D","value":""}
    ];

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