ng-repeatでチェックボックスを選択して配列を追加してください

Question

私は送信フォームに適切なデータを追加することに少し問題がありました。このフォームのすべてのfiledsはhttpリクエストから動的に来ます。このフィールドの1つはカテゴリです。このフィールドの値は、別のhttpリクエストから動的に取得され、ng-repeat Iの値をフォームに表示します。値にはIDと名前があります。私のフォームで送信する必要がありますカテゴリのIDの配列はcategories: [1,4,5,7]のように見えます。数字は選択されたカテゴリのIDです。問題は私の配列がcategories: [1: true, 5, true ]のように見えて、まったく間違っています。これは私の問題でplunkerです。私は自分のモデルと何か間違っていると思っていますが、正確に何かを見つけることはできません。それで誰も私が何が欠けているか教えてもらえますか？

コード

 $scope.category = [ 
    {"id":5,"name":"Data Quality"}, 
    {"id":2,"name":"Documentation"}, 
    {"id":4,"name":"Drug Supply"}, 
    {"id":8,"name":"Enrollment"}, 
    {"id":3,"name":"Patient Safety"}, 
    {"id":7,"name":"Randomization"}, 
    {"id":9,"name":"Site Performance"}, 
    {"id":1,"name":"Study Conduct"}, 
    {"id":6,"name":"Technology Related"} 
    ] 

    $scope.sendData = {} 

    $scope.vmodel = angular.copy($scope.sendData); 

$scope.onSubmit = function (event) { 
       if (event.id == null || event.id == 0) { 
        console.log(event) 
       } 
      }; 

HTML

<div class="form-check-inline" ng-repeat="cat in category"> 
     <label class="form-check-label col-xs-4 no-padding" for="categories" ng-true-value="'{{cat.name}}'" ng-false-value="''"> 
         {{ cat.name }} 
        <input type="checkbox" 
        class="form-check-input col-xs-2" 
        id="categories" 
        ng-model="vmodel.categories[cat.id]" /> 
     </label> 
    </div> 

Answer 1

<label class="form-check-label col-xs-4 no-padding" for="categories" ng-true-value="'{{cat.name}}'" ng-false-value="''"> 
      {{ cat.name }} 
      <input type="checkbox" class="form-check-input col-xs-2" ng-click="add(cat.id)" id="categories" /> 
      </label> 


$scope.sendData = { 
    categories: [] 
    } 

    $scope.add = function(id) { 
    if ($scope.sendData['categories'].indexOf(id) == -1) { 
     $scope.sendData.categories.push(id); 
    } else { 
     $scope.sendData.categories.splice($scope.sendData['categories'].indexOf(id), 1); 

    } 
    console.log($scope.sendData); 



    } 

    $scope.onSubmit = function(event) { 

    console.log($scope.sendData) 
    }; 

Answer 2

のは、あなたの入力は{ "5"：trueの場合、 "7"：真、 "8"：真、 "9"：真}であるとしましょう。

1）Transformオブジェクト：：私は2つのオプションが表示さ

$scope.$watch('vmodel.categories', function(val) { 
    if (val) 
    $scope.selected = Object.keys(val) 
    console.log($scope.selected) // output is $scope.selected 
}, true) 

2）変更するには、イベント

<!-- html --> 
<input type='checkbox' ng-click='toggle(cat)' /> 


// js 
$scope.selected = [] 
$scope.toggle = function(cat) { 
    if ($scope.vmodel.categories[cat]) 
    $scope.selected.push(cat) 
    else 
    $scope.selected.remove(cat) // pretend this function exists in js 
}