将复选框值传递给Angular JS中的控制器

Question

我有一组从数据库中填充的复选框。每个复选框值都包含一本书Id。

现在我有一个包含Save功能的ng-click="save()"按钮。如何将已检查的书Id的值传递给控制器​​，如何在控制器“Id方法中捕获save()的数组。如何将复选框值与控制器绑定在这里？

以下是视图中的代码，

<div ng-repeat="bk in Books">
  <input type="checkbox" value={{bk.Id}} ng-checked="$index ===0 ? true : false"/>{{bk.Name}}
</div>
<br/>
<input type="button" id="save" class="btn btn-success" value="Save" ng-click="save()"/>
<br/>

Answer 1

您不需要从视图中传递Id s值，您可以通过绑定机制直接在控制器中获取它们。

这里有一份工作样本。这样你就可以摆脱value={{bk.Id}}和ng-checked="$index ===0 ? true : false"。还要注意它是如何初始化复选框的状态（选中或取消选中）：ng-init="bookModel[bk.Id] = $first"设置仅为列表中的第一个元素选中的复选框。

angular
  .module('app', [])
  .controller('ctrl', function($scope) {
    $scope.Books = [{
        Id: 1,
        Name: "Harry Potrer"
      },
      {
        Id: 2,
        Name: "Python"
      },
      {
        Id: 3,
        Name: "C#"
      }
    ];
    $scope.bookModel = {};
    $scope.save = function() {
      var checkedBooks = [];
      for (var k in $scope.bookModel) {
        if ($scope.bookModel.hasOwnProperty(k) && $scope.bookModel[k]) {
          checkedBooks.push(k);
        }
      }

      //do your stuff with the ids in `checkedBooks`
      alert(checkedBooks);
    }
  });

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

<div ng-repeat="bk in Books">

  <input type="checkbox" ng-model="bookModel[bk.Id]" ng-init="bookModel[bk.Id] = $first"/>{{bk.Name}}

</div><br/>
<input type="button" id="save" class="btn btn-success" value="Save" ng-click="save()" />

</span>