通过使用 ng-repeat 选择复选框来添加一个数组

Question

我在向我的提交表单添加正确数据时遇到了一个小问题。此表单的所有字段都动态地来自 http 请求，其中一个字段是类别，此字段的值动态地来自另一个 http 请求，在 ng-repeat 的帮助下，我在我的表单中呈现值。值具有 ID 和名称。我需要在我的表单中发送类别 ID 数组，看起来像 categories: [1,4,5,7]，其中数字是所选类别的 ID。问题是我的数组看起来像 categories: [1: true, 5, true ] 什么是完全错误的。这是 plunker 我的问题。我想我的 ng-model 有问题，但找不到确切的问题。那么有人可以告诉我我错过了什么吗？

代码

     $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

假设您的输入是 {"5":true,"7":true,"8":true,"9":true}。我看到两个选项：

1) 变换对象：

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

Answer 2

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

通过使用 ng-repeat 选择复选框来添加一个数组

Add an array by selecting checkbox with ng-repeat

javascript

arrays

angularjs

angularjs-ng-repeat

angular-ngmodel