CODEWITHSUNDEEP
angularjs
Jason Shah
Jason Shah

Reputation: 2647

Interaction between multiple select boxes

I am new to Angular.js and have a design question.

I have three multi-select boxes on a page, one for Products, one for Users, and one for Groups. On page load, Products shows all Products, Users shows all Users, and Groups shows all Groups. When the user chooses one or more Products, Users and Groups should each refresh to show only those users/groups that have used the Product.

What is the Angular way to design the interaction between these select boxes?

My first approach is:

This feels very... un-Angular. Suggestions on how to improve it?

Upvotes: 2

Views: 737

Answers (2)

JSager
JSager

Reputation: 1430

Bind each select to a model and use ng-change to listen. Don't forget to set ng-options on your select, this will automatically bind your secondary select box when the get returns:

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>

Controller:

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

See the documentation on select for a full explanation of ng-options: http://docs.angularjs.org/api/ng.directive:select

Upvotes: 1

Zack Argyle
Zack Argyle

Reputation: 8407

I was just looking into this yesterday. Check out my jsfiddle I put together that uses a directive to handle everything. It keeps a list of the clicked objects id in an array. http://jsfiddle.net/zargyle/t7kr8/

It's based on this html layout

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

Upvotes: 0

Related Questions