Display checkboxes in with AngularJS based on two object arrays

Question

I know there are several similar topics already but I found none that really matches my problem.

When opening my AngularJS app/website I am loading two arrays of objects (both are of the same type). One list contains all possible values (called sources here) and the other list is a selection of elements from the first.

My goal is display all sources as checkboxes. The ones from the second list have to be preselected, the rest not. Now the user can select/deselect checkboxes. If he does so I need to inform the server (with the source.id).

What I got so far:

exampleApp.controller('testController', [ '$scope', '$http', function($scope, $http) { $scope.sources = []; $scope.selectedSources = []; $scope.changeSource = function(source) {...}; }) 

and

<div ng-repeat="source in sources"> <input type="checkbox" name="source.name" value="{{source.id}}" ng-model="??" ng-change="changeSource(source.id)" > {{source.name}} </div> 

What I can't figure out is how I can get ng-model to preselect the right checkboxes and how to get the new (and old) values to changeSource(). Is there an elegant way of doing that?

Example (Pseudo code only):

Sources = [{id=1, name=test1},{id=2, name=test2}, ...] SelectedSources = [{id=2, name=test2}] 

Now what I need are checkboxes like this:

[ ] test1 [x] test2 

where all elements from sources are checkboxes and the ones from selectedsources are preselected. Changes of the selection can be stored in selected sources (as objects) and have to trigger my changeSource() function so that I can inform my server.

Answer 1

Set the selected/unselected state in a property inside each of the objects in Sources array(initialize it based on whats present in selectedArray)

$scope.sources.forEach(function(source) { source.selected = isSelected(source); }) function isSelected(selectedSource) { return !!$scope.selectedSources.find(function(s) { return s === selectedSource || s.id == selectedSource.id; }) } 

Here's a working plunker link

Answer 2

I didn't understood your question very well, but if i'm not mistaken, you want to fill the second collection only with the selected items from the first one, right? If it's the case, you could turn your second collection into a returning function with a filter of the first inside, as follows:

In your controller:

exampleApp.controller('testController', [ '$scope', '$http', function ($scope, $http) { $scope.sources = []; /* ... */ $scope.getSelectedSources = function () { return $scope.sources.filter(function (val) { return val.selected; }); }; }) 

In your template:

<div ng-repeat="source in sources"> <input type="checkbox" name="source.name" value="{{source.id}}" ng-model="source.selected" ng-change="changeSource(source.id)" > {{source.name}} </div> <div ng-repeat="source in getSelectedSources()"> <input type="checkbox" name="source.name" value="{{source.id}}" ng-model="source.selected" ng-change="changeSource(source.id)" > {{source.name}} </div> 

Answer 3

Hi this may be help you to get new & old value.

$scope.$watch('sources', function (oldval, newval) { console.log(oldval + newval); });