Question

我用角度构建一个非常简单的表单。我有一个对象数组，如下所示：

data: [{id: 1, name: "Peter"},{id: 2, name: "Paul"}...]

我需要根据该数据构建一些复选框。用户可以选择多个值。然后，当他们点击提交时，我应该向数据库发送一组id号码，格式如下：

{nameIds: [1,2]}

我有一段时间建立这个阵列。我一直关注其他的S.O.示例，但有些东西不能点击。这就是我现在所拥有的：

    <label ng-repeat="name in vm.nameArray">
            <input type="checkbox" ng-model="name.selected"> {{name.name}}
    </label>
        <button ng-click="vm.submit()" class="btn btn-primary margin-10-tb">NEXT</button>

并在我的控制器中：

vm.nameArray = response.data.data;
vm.selectedNames = [];
vm.nameIds = [];
vm.submit = function() {
  vm.selectedNames = vm.nameArray.filter(function(name){
    if (name.selected) return name.id;
  });
  vm.selectedNames.forEach(function(name){
    vm.nameIds.push(name.id);
  });
};

也许您已经猜到了，但问题在于，当用户取消选择之前添加的名称时，vm.nameIds不会更新。取消选择的名称的ID将保留在数组中。

有关如何最好地创建此动态数组以提交的任何提示将非常感激。

Answer 1

您可以先搜索所选项目，最后获取其id属性：

vm.selectedNames = vm.nameArray.filter(function(name){
    return name.selected;
  }).map(function(value){
    return value.id;
  });

数据始终会更新。

Answer 2

如果向数据添加“isChecked”属性，还可以进一步减少复杂性。请在下面找到plunker：

我已添加了将“isChecked”属性添加到数据的逻辑。

注意：如果您想使用当前的逻辑，请使用@ SergioEscudero的答案。

BBC micro:bit

HTML：

<html>
<head>
    <title>Directive Practice</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <h1>HEADER</h1>

    <div ng-controller="myCtrl">
 <label ng-repeat="name in nameArray">
          <input type="checkbox" ng-model="name.isChecked"> {{name.name}}
    </label>
        <button ng-click="submitnew()" class="btn btn-primary margin-10-tb">NEXT</button>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

JS：

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


myApp.controller('myCtrl',function($scope) {

$scope.data =  [{id: 1, name: "Peter"},{id: 2, name: "Paul"},
  {id: 3, name: "John"},{id: 4, name: "David"}]

$scope.data.forEach(function(data) {
  //$scope.data[key].isChecked=false;
  data.isChecked=false;
})

$scope.nameArray=$scope.data;

$scope.submitnew = function() {
  $scope.nameArray.forEach(function(data) {
  if(data.isChecked)
  console.log(data.id);
})
}

})

AngularJS - 如何动态提交复选框选择数组

2 个答案: