4

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/

Foo Stack
  • 2,185
  • 7
  • 24
  • 25

1 Answers1

2

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/

the-lay
  • 1,461
  • 12
  • 22
  • Excellent, thanks for your help. If possible would you also be able to show me what a checkbox example would look like? :) – Foo Stack May 20 '13 at 08:34
  • Thanks, that is good; but is there one which doesn't edit the source JSON (with `checked: false` values)? – Foo Stack May 20 '13 at 10:02
  • 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: http://jsfiddle.net/qQg8u/5/ That way options source will be untouched. – the-lay May 20 '13 at 10:47
  • 1
    FYI: Got one to work which gives me an array of checked boxes: http://jsfiddle.net/C7eRd/1 – Foo Stack May 20 '13 at 19:51
  • Nice! :) Surely there are a lot of options how to make the same thing visually. – the-lay May 21 '13 at 06:32