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

【问题标题】：Add an array by selecting checkbox with ng-repeat通过使用 ng-repeat 选择复选框来添加数组
【发布时间】：2016-08-19 03:06:23
【问题描述】：

在我的提交表单中添加正确数据时遇到了一个小问题。此表单的所有文件都动态来自 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>

【问题讨论】：

你的输出（vmodel.categories）看起来像{"5":true,"7":true,"8":true,"9":true}，对吧？而你正在寻找 [5, 7, 8, 9]
@user3080953 没错
这里有一个固定的分叉：link
@KaushalNiraula 非常感谢！它工作完美
你能把它标记为完成吗？

标签： javascript angularjs arrays angularjs-ng-repeat angular-ngmodel

【解决方案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)
  };

【讨论】：

【解决方案2】：

假设您的输入是 {"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
}

【讨论】：