Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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/

share|improve this question

1 Answer

up vote 1 down vote accepted

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/

share|improve this answer
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 at 8:34
Sure, check edit of this post. – Iļja Gubins May 20 at 9:16
Thanks, that is good; but is there one which doesn't edit the source JSON (with checked: false values)? – Foo Stack May 20 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: jsfiddle.net/qQg8u/5 That way options source will be untouched. – Iļja Gubins May 20 at 10:47
FYI: Got one to work which gives me an array of checked boxes: jsfiddle.net/C7eRd/1 – Foo Stack May 20 at 19:51
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.