1

AngularJSには、とを含む色の配列がありtitleますtype。すべての色をリストとして表示します。

ここで、ユーザーが特定の色のみを表示するように選択できるメニューを追加したいと思いますtype。この目的のために、colortypesを含む別の配列があります。これもリストとして表示されます。

次に、カラータイプをクリックして、色のリストを、を選択した色のみに減らしたいと思いますcolor.type。そのために私はフィルターを使用します：

<ul>
    <li ng-repeat="color in colors | filter:search">
        {{ color.title }}
    </li>
</ul>

カラータイプの手動リストを使用すると、すべて正常に機能します。 

<ul>
    <li>
        <a href="" ng-click="search.type = 'primary';">
            Primary
        </a>
    </li>               
</ul>

ただし、上記のようにカラータイプの配列を使用すると、クリックしても何も起こりません。

<ul>
    <li ng-repeat="colortype in colortypes">
        <a href="" ng-click="search.type = '{{ colortype.title }}';">
            {{ colortype.title }}
        </a>
    </li>               
</ul>

これは、ng-clickがng-repeat（またはおそらく=割り当ての範囲）内に配置されていることと関係があると思いますか？どうすれば問題を解決できますか？

4

2 に答える 2

3

ディレクティブではngClick、JSコードではなく、式を指定します。

したがって、使用するだけ<a href="" ng-click="search.type = colortype.title">で機能します（注：による補間はありません{{}}）

于 2013-03-25T13:50:29.643 に答える
0

ng-repeat子スコープを作成するため、はコントローラーのスコープではなく子スコープをng-click参照しています。これに対処するための2つのオプションがあります。

1）すばやく汚い方法は、を使用して元のスコープにアクセスすること$parentです。

ng-click次のようなものに変更します。

<a href="#" ng-click="$parent.search.type = colortype.title;">
    {{ colortype.title }}
</a>

JSFiddleの$parentソリューションを参照してください

上記のテンプレートがネストされているか、ネストされている場合、このアプローチは機能しなくなる可能性があります。$parent.$parent...次に、 etcでコントローラースコープにアクセスする必要があります。

2）より良いアプローチは、スコープへの参照を返すコントローラーのスコープ上に関数を作成することです。プロトタイプの継承により、子スコープからコントローラースコープ関数にアクセスできます。 

function ColorCtrl($scope) {      
    $scope.getColorCtrlScope = function() {
         return $scope;   
    }
    .....
 <a href="#" ng-click="getColorCtrlScope().search.type = colortype.title;">
     {{ colortype.title }}
 </a>

JSFiddleでより良い解決策を見る

于 2014-09-25T16:32:12.590 に答える