2つのオブジェクト配列に基づくAngularJSのチェックボックスを表示

Question

私はすでにいくつかの同様のトピックがあることを知っていますが、私は本当に私の問題に一致するものは見つけませんでした。

私のAngularJSアプリケーション/ウェブサイトを開くとき、私はオブジェクトの2つの配列をロードしています（どちらも同じタイプです）。 1つのリストはすべての可能な値（ここではソース）を含み、もう1つのリストは最初からの要素の選択です。

私の目標は、すべてのソースをチェックボックスとして表示することです。 2番目のリストのものはあらかじめ選択しなければならず、残りのものはあらかじめ選択する必要があります。これで、ユーザはチェックボックスを選択/選択解除できます。彼がそうするなら、私は（source.idと）サーバーに知らせる必要があります。私がこれまでに得たもの

：

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

と

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

私が把握することはできませんどのように私は右のチェックボックスを事前に選択モデルをngのとどのように取得するには、Getことができる方法であります新しい（そして古い）値をchangeSource（）に返します。それを行う上品な方法はありますか？

例（擬似コードのみ）：

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

は今、私は必要なものを、このようなチェックボックスです：

ソースからのすべての要素がチェックボックスであり、selectedsourcesからのものは事前に選択されている

[ ] test1 [x] test2 

。選択の変更は、選択されたソース（オブジェクト）に保存することができ、自分のサーバーに通知できるようにchangeSource（）関数を起動する必要があります。

Answer 1

Sources配列内の各オブジェクト内のプロパティで選択/非選択状態を設定します（selectedArrayにあるwhatsに基づいて初期化します）

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

ここではこれに対処する最も簡単な方法は、それが選択されている状況に対応する各項目のための余分なフィールドを持つ単一のアレイを使用することです作業plunker link

Answer 2

こんにちは、これは新しい値を取得するのに役立ちます&古い値です。

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

Answer 3

右、私は非常によくあなたの質問を理解していなかったが、私は間違っていないならば、あなたは最初の1から選択された項目を有する第2のコレクションを埋めるためにしたいですか？お使いのコントローラで

：

テンプレートで

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

を：

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

それはケースだ場合は、次のように、内側の第一のフィルタと返す関数に2番目のコレクションを回すことができます