Bind checkbox or multi-select dropdown to array in AngularJS?

Question

I am new to AngularJS, and am thus confused as how to bind checkboxes or multi-select dropdowns to a separate list.

<body ng-controller="FooListCtrl">
  <span ng-repeat="foolist in foos">
    <select ng-model="selected" ng-options="foo for foo in foolist" multiple="">
    </select>
  </span>
</body>

'use strict';

function FooListCtrl($scope) {
    $scope.foos = {"Bar": [ "foo", "bar"]};
    $scope.selected = [];
}

FooListCtrl.$inject = ['$scope'];

Run the code: http://jsfiddle.net/gBcN2/

the-lay · Accepted Answer · 2013-05-20 09:15:57Z

2

If I got right what you want:

You don't have ng-app definition.
On jsFiddle for snippets of AngularJS put No wrap - in <head> load mode, if you are using AngularJS as external resource.
Model selected has it's own "range", because you use ng-repeat. To see what I mean, here is fixed version of your code: http://jsfiddle.net/gBcN2/2/

First {{selected}} works fine, but second is "outside" of ng-repeat scope.

PS:
You don't have to use ng-repeat if you want to use it like you wrote in your example: quick fiddle of how I'd do it.

Edit:
For checkboxes it's something like that - http://jsfiddle.net/qQg8u/2/

edited May 20, 2013 at 9:15

answered May 20, 2013 at 8:30

the-lay

1,48112 silver badges23 bronze badges

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

5 Comments

Foo Stack Over a year ago

Excellent, thanks for your help. If possible would you also be able to show me what a checkbox example would look like? :)

Foo Stack Over a year ago

Thanks, that is good; but is there one which doesn't edit the source JSON (with checked: false values)?

the-lay Over a year ago

I'm not really sure, but I think there's got to be a "storage" place to somehow check if checkbox is checked or not (sorry for tautology :)). If you don't want to change JSON contents of that optionSource you can use other variables, like that: jsfiddle.net/qQg8u/5 That way options source will be untouched.

Foo Stack Over a year ago

FYI: Got one to work which gives me an array of checked boxes: jsfiddle.net/C7eRd/1

the-lay Over a year ago

Nice! :) Surely there are a lot of options how to make the same thing visually.

Collectives™ on Stack Overflow

Bind checkbox or multi-select dropdown to array in AngularJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related