Kontrollkästchen mit AngularJS basierend auf zwei Objekt-Arrays anzeigen

Question

Ich weiß, dass es bereits mehrere ähnliche Themen gibt, aber ich habe keine gefunden, die wirklich zu meinem Problem passen.

Beim Öffnen meiner AngularJS App/Website lade ich zwei Arrays von Objekten (beide vom selben Typ). Eine Liste enthält alle möglichen Werte (hier Quellen genannt) und die andere Liste ist eine Auswahl von Elementen aus der ersten.

Mein Ziel ist, alle Quellen als Kontrollkästchen anzuzeigen. Die aus der zweiten Liste müssen vorausgewählt werden, der Rest nicht. Jetzt kann der Benutzer Ankreuzfelder an-/abwählen. Wenn dies der Fall ist, muss ich den Server informieren (mit der source.id).

Was ich habe bisher:

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

und

<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> 

Was ich nicht herausfinden kann, ist, wie ich ng-Modell bekommen, die richtigen Kontrollkästchen vorzuwählen und wie das bekommen neue (und alte) Werte zu changeSource(). Gibt es eine elegante Art, das zu tun?

Beispiel (Pseudo-Code nur):

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

Nun, was ich brauche sind Kontrollkästchen wie folgt aus:

[ ] test1 [x] test2 

wo alle Elemente aus Quellen Kontrollkästchen und die, die von selectedsources sind vorausgewählt. Änderungen der Auswahl können in ausgewählten Quellen (als Objekte) gespeichert werden und müssen meine changeSource() -Funktion auslösen, damit ich meinen Server informieren kann.

Answer 1

Setzen Sie den ausgewählten/nicht ausgewählten Zustand in einer Eigenschaft innerhalb jedes Objekts im Array Sources (initialisieren Sie ihn basierend auf dem, was in selectedArray vorhanden ist)

$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; 
    }) 
    } 

Hier ist ein funktionierender Plotter link

Answer 2

Hi dies kann Ihnen helfen, neue & alten Wert zu bekommen.

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

Answer 3

Ich habe Ihre Frage nicht sehr gut verstanden, aber wenn ich nicht irre, möchten Sie die zweite Sammlung mit den ausgewählten Elementen aus dem ersten nur füllen, nicht wahr? Wenn dies der Fall ist, könnten Sie Ihre zweite Sammlung in eine Rückkehr-Funktion mit einem Filter der ersten innen drehen, wie folgt:

In Ihrem Controller:

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

in Ihrer Vorlage:

<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>