CODEWITHSUNDEEP
javascriptdata-bindingangularjshtml-selecthtml.checkbox
Foo Stack
Foo Stack

Reputation: 2315

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

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/

Upvotes: 4

Views: 12263

Answers (1)

the-lay
the-lay

Reputation: 1481

If I got right what you want:

  1. You don't have ng-app definition.
  2. On jsFiddle for snippets of AngularJS put No wrap - in <head> load mode, if you are using AngularJS as external resource.
  3. 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/

Upvotes: 2

Related Questions