4

フィルター検索用のオブジェクトを構築しようとしています。ユーザーは検索に複数のフィルターを追加したり、同じフィルターを異なる値で複数回追加したりできます。

ユーザーには、フィルターを追加するためのボタンが表示されます。追加されたそれぞれは、使用可能なフィルターのリストから入力された選択を示しています。

現時点では、同じフィルターを 2 つ (つまり、2 つの「フィルター 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 に答える