Multiple select boxes with different selected values in angularJS

Question

I have multiple select boxes and I'm using angular JS. Each select box needs to have a different selected value. So far everything I've seen has elements that share the same selected value. In order to achieve this a scope is used. Since I can potentially have hundreds of drop downs... actually thousands... what is the correct approach here? Create a scope for each one? Try to have one scope that mutates with each select box?

Here is an example with what I have jsfiddle.

Any help is much appreciated.
Thanks


function MyCntrl($scope) {
$scope.colors = [
    {name:'black'},
    {name:'red'},
    {yellow:'yellow'}
]
$scope.isSel = $scope.colors[1];
}

Benny Bottema · Accepted Answer · 2013-02-10 13:01:49Z

2

You need to bind each select box to its own scope. You can do it manually, binding each one to a new object instead of the same isSel, or you can use a ng-repeat like so:

http://jsfiddle.net/zmU8R/9/

html:

<div ng-app="">
  <div ng-controller="MyCntrl">
      <div ng-repeat="control in controls">
          <select ng-model="control.isSel" ng-options="c.name for c in colors"></select><br />
      </div>
      <hr />
      <div ng-repeat="control in controls">
          {{control.id}}: {{control.isSel}}
      </div>
  </div>
</div>

script:

function MyCntrl($scope) {
    $scope.controls = [
        {id: 1, isSel:null},
        {id: 2, isSel:null},
        {id: 3, isSel:null}
    ];
    $scope.colors = [
        {name:'black'},
        {name:'red'},
        {name:'yellow'}
    ];
}

answered Feb 10, 2013 at 13:01

Benny Bottema

11.6k11 gold badges76 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rajub Over a year ago

Hi i also need same kind but when i selected the "black" in first select box it should be disabled in other select boxes and vice versa. How can i achieve this. Thanks

Pythonic · Accepted Answer · 2013-02-08 16:25:24Z

Not sure I've figured out what you exactly want. As far as I understand, you need each selectbox to have different value. So, you need to bind each selectbox to a different variable.

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <hr/>
    <div ng-repeat="n in [] | range: selectionsCount">
        <select ng-model="selectedValues[$index]" ng-options="c.name for c in colors"></select>
    </div>
    {{ selectedValues }}
  </div>
</div>

For a much clearer example, I made selectboxes count variable here.

angular.module('myApp', [])
    .controller('myCtrl', function ($scope) {
        $scope.colors = [
            {name: 'black'},
            {name: 'red'},
            {name: 'yellow'}
        ];
        $scope.selectedValues = [];
        $scope.selectionsCount = 5;
    })
    .filter('range', function () {
        return function(input, total) {
            total = parseInt(total);
            for (var i=0; i<total; i++)
                input.push(i);
            return input;
        };
    });

You can test it here: http://jsfiddle.net/zmU8R/7/ If I misunderstood your question, feel free to correct me.

Collectives™ on Stack Overflow

Multiple select boxes with different selected values in angularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related