2

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

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

设计这些选择框之间交互的 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 回答