AngularJs - 選択したオブジェクトのリストをすべてのオブジェクトのリストにバインドしてチェックボックスを選択します。

Question

私の問題の解決策を探しましたが、正解を見つけることができませんでした。
私はすべてのの質問とのリストを選択しました質問があります。私はすべての質問のリストからチェックボックスのリストを作成し、選択された質問のリストにあるものをチェックする必要があります。チェックボックスに変更が加えられると、選択した質問のリストが必要に応じて更新されます。すべての質問のリストは決して変更されません。どうすればこれを達成できますか？ここに私の状況を非常に簡略バージョンです：私のアプリケーションで

 var MyApp = angular.module('MyApp', []); 
 

 
     MyApp.controller('MyController', ['$scope', function ($scope) { 
 

 
      $scope.allQuestions = [ 
 
       { q_id: 1, q_txt: 'What time is it?', q_sort: 1}, 
 
       { q_id: 2, q_txt: 'What is that?', q_sort: 2}, 
 
       { q_id: 3, q_txt: 'Who are you?', q_sort: 4}, 
 
       { q_id: 4, q_txt: 'What color is that?', q_sort: 3} 
 
      ]; 
 

 
      $scope.selectedQuestions = [ 
 
       { q_id: 1, other_prop: 'yyy' }, 
 
       { q_id: 4, other_prop: 'zzz' }, 
 
      ]; 
 
     }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MyController"> 
 

 
     <div ng-repeat="question in allQuestions"><input type="checkbox" ng-model="x" /> {{ question.q_txt }}</div> 
 

 
    </div>

は、リストは、サーバから来て、私は戻っへのオブジェクトとして選択した質問のリストを返すことができるようにしたいと思います変更を保存するときに これを達成するためのバインディング、または正しいチェックボックスのチェック方法を理解できません。 2つのリストが異なっていることに注意してください。しかし、それらは一致するキーとしてq_id値を持っています。どんな助けでも大歓迎です。

Answer 1

ユーザーがフォームを送信するまで、どの質問を選択するか心配する必要はないので、私はその時点ですべての質問のリストをループし、選択した質問の配列を作成します。このような

何か：

function getSelections() { 
    var selectedQuestions = [] 
    $scope.allQuestions.forEach(function(question) { 
     if (question.selected) { 
      var questionCopy = angular.copy(question) 
      selectedQuestions.push(questionCopy) 
     } 
    }) 
    return selectedQuestions 
} 

次に、あなたがあなたのAPIに結果を投稿して渡す前にこの関数を呼び出します。

あなたはただで事前に選択されなければならないのチェックボックスを事前に選択し処理するためにNG-モデルを使用することができるはずです。このような

<div ng-repeat="question in allQuestions"><input type="checkbox" ng-model="question.selected" /> {{ question.q_txt }}</div> 

Answer 2

何かがトリックを行う必要があります。 array.find（）を使用するほうが効率的かもしれません。 _のようなライブラリを使用すると、これは簡単になります。

$scope.selectedQuestions.map(function(selectedQuestion) { 
     var match = $scope.allQuestions.some(function(question) { 
      if (question.q_id == selectedQuestion.q_id) { 
       question.selected = true 
       return true 
      } 
      return false 
     } 
    }