Question

我是Angular.js的新手并且有一个设计问题。

我在页面上有三个多选框，一个用于产品，一个用于用户，一个用于组。在页面加载时，产品显示所有产品，用户显示所有用户，组显示所有组。当用户选择一个或多个产品时，用户和组应每次刷新以仅显示已使用该产品的用户/组。

设计这些选择框之间的交互的Angular方法是什么？

我的第一个方法是：

每个选择都来自$ http.get（）以填充它
当用户点击产品时，听取那个选择（使用jQuery on（）？），构造$ http.get（）请求，并更新模型。这将更新用户和组的选择框。

这感觉非常......非角度。关于如何改进它的建议？

Answer 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的完整说明，请参阅有关选择的文档：http://docs.angularjs.org/api/ng.directive:select

Answer 2

我昨天只是在调查这个问题。看看我放在一起使用指令处理一切的jsfiddle。它保留数组中单击的对象id的列表。 http://jsfiddle.net/zargyle/t7kr8/

它基于这个html布局

<div ng-repeat="item in list" >
    <input type="checkbox" checkbox-group />
    <label>{{item.value}}</label>
</div>

多个选择框之间的交互

2 个答案: