0

AngularJS に基本的なアプリケーションがあります。モデルには、多数のアイテムとそれらのアイテムに関連付けられたタグが含まれています。私が達成しようとしているのは、表示されるアイテムをフィルタリングして、1 つ以上のアクティブなタグを持つアイテムのみが表示されるようにすることですが、ビューからモデルを操作する方法を理解するのに苦労しています。

JS はhttp://jsfiddle.net/Qxbka/2で入手できます。これには、これまでに到達した状態が含まれていますが、2 つの問題があります。toggleTag()まず、ディレクティブはコントローラーでメソッドを呼び出そうとします。

template: "<button class='btn' ng-repeat='datum in data' ng-click='toggleTag(datum.id)'>{{datum.name}}</button>"

しかし、メソッドは呼び出されません。ng-repeat次に、出力セクションを変更して、1 つ以上のアクティブなタグを持つ項目のみを表示する方法がわかりません。

私が間違っていることと、これを機能させる方法についての指針をいただければ幸いです。

更新 ディレクティブのメソッドを更新して、データ項目を直接渡すようにしました。

template: "<button class='btn' ng-repeat='datum in data' ng-click='toggle(data, datum.id)'>{{datum.name}}</button>"

toggle()また、ディレクティブにメソッドを作成しました。これを行うことで操作が可能dataになり、状態 HTML に反映されますが、これが正しい方法であるかどうかについてのフィードバックをいただければ幸いです (私にはまったく正しくないと感じています)。

タグの値が更新されたときに出力を再評価する方法にまだこだわっています。

4

1 に答える 1

0

次のフィルタ ( docs ) を使用できng-repeatます。

<li ng-repeat="item in items | filter:tagfilter">...</li>

フィルター式の引数には、配列内の各要素に対して 1 回呼び出されるスコープ上の関数など、さまざまなものを指定できます。true を返す場合は要素が表示され、false を返す場合は表示されません。

selectedTagsこれを行う 1 つの方法は、スコープに配列を設定することです。これは、配列を見て入力しますtags。

$scope.$watch('tags', function() {
    $scope.selectedTags = $scope.tags.reduce(function(selected, tag) {
        if (tag._active) selected.push(tag.name);
        return selected;
    }, []);
}, true);

最後にある余分な部分により、Angular は等価対参照によって要素を比較します (これは、各タグtrueの属性を監視する必要があるためです。_active

次に、フィルター関数を設定できます。

$scope.tagfilter = function(item) {
    // If no tags are selected, show all the items.
    if ($scope.selectedTags.length === 0) return true;

    return intersects($scope.selectedTags, item.tags);
}

intersects2 つの配列の共通部分を返す手っ取り早いヘルパー関数を使用すると、次のようになります。

function intersects(a, b) {
    var i = 0, len = a.length, inboth = [];

    for (i; i < len; i++) {
        if (b.indexOf(a[i]) !== -1) inboth.push(a[i]);
    }

    return inboth.length > 0;
}

これを実際に示すために、ここであなたのフィドルをフォークしました。

これについて行った方法の小さな問題の 1 つは、アイテムに ID ではなくタグ「名前」の配列があることです。したがって、この例はタグ名の配列で機能します (一貫性を持たせるために、初期データの一部を編集する必要がありました)。

于 2013-02-15T17:26:13.913 に答える