2

私は Angular.js を初めて使用し、設計に関する質問があります。

ページに 3 つの複数選択ボックスがあり、1 つは製品用、1 つはユーザー用、もう 1 つはグループ用です。ページの読み込み時に、製品にはすべての製品が表示され、ユーザーにはすべてのユーザーが表示され、グループにはすべてのグループが表示されます。ユーザーが 1 つ以上の製品を選択すると、ユーザーとグループがそれぞれ更新され、製品を使用したユーザー/グループのみが表示されます。

これらの選択ボックス間の相互作用を設計するAngularの方法は何ですか?

私の最初のアプローチは次のとおりです。

  • 各選択は、それを埋めるために $http.get() から供給されます
  • ユーザーが製品をタップすると、その選択をリッスンし (jQuery on()?)、$http.get() リクエストを作成し、モデルを更新します。これにより、ユーザーとグループの選択ボックスが更新されます。

これは非常に...非Angularです。それを改善する方法に関する提案はありますか？

4

2 に答える 2

1

各選択をモデルにバインドし、ng-change を使用してリッスンします。選択時に ng-options を設定することを忘れないでください。これにより、get が返されたときにセカンダリ選択ボックスが自動的にバインドされます。

HTML:

<select ng-model="product" ng-change="productChanged()" ng-options="p.name for p in products"></select>
<select ng-model="user" ng-options="u.name for u in users"></select>

コントローラ：

    $scope.productChanged = function(){
        //$scope.product has your selected item in it.
        $scope.users = $http.get(...)
    }

ng-options の完全な説明については、select のドキュメントを参照してください: http://docs.angularjs.org/api/ng.directive:select

于 2013-08-09T14:16:56.263 に答える
0

私はちょうど昨日これを調べていました。ディレクティブを使用してすべてを処理する、私がまとめたjsfiddleをチェックしてください。クリックされたオブジェクト ID のリストを配列に保持します。 http://jsfiddle.net/zargyle/t7kr8/

このhtmlレイアウトに基づいています

<div ng-repeat="item in list" >
    <input type="checkbox" checkbox-group />
    <label>{{item.value}}</label>
</div>
于 2013-08-09T15:23:48.700 に答える