How to use checkboxes for creating an array-list of related objects in angularjs

Question

I have a given array of objects, whose objects I would like to add to a 'selected'-list depending on related checkboxes. How could I set them up without having to set up the controller to much.

Here is the fiddle which works fine, when using radio-boxes instead: http://jsfiddle.net/JohannesJo/6ru2R/

JavaScript:

app = angular.module('app',[]); app.controller('controller', function($scope){ $scope.aData = [ {i:1}, {i:2} ]; $scope.aSelected = []; });

html:

<body ng-app="app"> <div ng-controller='controller'> <input type = "checkbox" ng-model = "aSelected" value = "{{aData[0]}}"> <input type = "checkbox" ng-model = "aSelected" value = "{{aData[1]}}"> <div>test: {{oSelected}}</div> </div> </body>

really not clear what you want. demo uses checkboxes already, not radios. Explain behavior in more detail — charlietfl, CommentedMar 1, 2013 at 5:15
Sorry my fiddles got messed up. I updated the link and the code. Basically i would like to have an array containing the values of the checked checkboxes if they share the same model or - as it is not possible this - some similar functionality. — hugo der hungrige, CommentedMar 1, 2013 at 5:26
@charilietfl: That is definitely the closest i got so far! Its a little tricky in my special case, but I'll try it. Thank you! I'll wait for another one or two days, but if you post this as answer and no better solution is in sight, I'll give you the credits for the answer! — hugo der hungrige, CommentedMar 1, 2013 at 21:54
@charilietfl: May I also ask, what would be the most angular way to iterate over such an array of objects? Would you use ng-show inside a ng-repeat? Or is there a better and more efficient way? — hugo der hungrige, CommentedMar 1, 2013 at 22:55

bmleite · Accepted Answer · 2013-02-28 23:53:05Z

One option is to watch for changes on the oSelected Array and create the list of related objects base on it.

$scope.$watch(function () { return $scope.oSelected; }, function (value) { $scope.selectedItems = []; angular.forEach($scope.oSelected, function (v, k) { v && $scope.selectedItems.push($scope.aData[k]); }); }, true);

jsfiddle: http://jsfiddle.net/bmleite/zea7g/2/

Thanks. I'm looking into it atm. The problem is, that i will have to add data binding for the initialization in addition to the code. I was really hoping that there is a way to make checkboxes behaving as smart as radio-boxes. I would argue that it ain't the most counterintuitive thing to want a group of checkboxes to behave like a list of things and not like a 1-0 operator. — hugo der hungrige, CommentedMar 1, 2013 at 0:11

Collectives™ on Stack Overflow

How to use checkboxes for creating an array-list of related objects in angularjs

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related