javascript - Angular 复选框不是独立的

我有个特别的问题有些angular checkboxes
我在单独的divs中创建它们，每个checkbox有不同的id，根据来自数据库的一组数据，它们将被选中。
我认为这一点最好用代码来理解：
html：

 <div class="form-group row">
     <label for="field_publication" class="col-md-2 form-control-label">Drug/s:</label>
       <div class="btn btn-sm btn-primary">
        <input type="checkbox" id="check1" ng-checked="drugTypeIds.indexOf(1)!==-1" ng-click="updateSelection(1, publication, 'antimalarials')"> Antimalarial
         </div>
         <div class="btn btn-sm btn-primary">
         <input type="checkbox" id="check2" ng-checked="drugTypeIds.indexOf(2)!==-1" ng-click="updateSelection(2, publication, 'antibiotics')"> Antibiotic
        </div>
       <div class="btn btn-sm btn-primary">
      <input type="checkbox" id="check3" ng-checked="drugTypeIds.indexOf(3)!==-1" ng-click="updateSelection(3, publication, 'antiretrovirals')"> Antiretroviral
      </div>
       <div class="btn btn-sm btn-primary">
       <input type="checkbox" id="check4" ng-checked="drugTypeIds.indexOf(4)!==-1" ng-click="updateSelection(4, publication, 'antidiabetics')"> Antidiabetic
       </div>
       <div class="btn btn-sm btn-primary">
       <input type="checkbox" id="check5" ng-checked="drugTypeIds.indexOf(6)!==-1" ng-click="updateSelection(6, publication, 'antituberculosis')"> Antituberculosis
       </div>
       <div class="btn btn-sm btn-primary">
       <input type="checkbox" id="check6" ng-checked="drugTypeIds.indexOf(5)!==-1" ng-click="updateSelection(5, publication, 'maternal and reproductive')"> Maternal Health
       </div>
</div>

因此，ng-checked告诉代码在一个数组中查找对象的id，这个数组是我在数据上传到表单后创建的，这发生在控制器中，使用以下方法：

$scope.drugTypeIds = null;
    $scope.checkboxes = function (publicationDrugTypes) {
                    $scope.drugTypeIds = [];
                    publicationDrugTypes.forEach(function (typeDrug) {
                        $scope.drugTypeIds.push(typeDrug.id);
                    });
                };

因此，在这里，用一个空值初始化drugTypeIds，直到加载数据，一旦加载数据，它将转到publicationDrugTypes对象的变量publication，并将其作为参数传递给复选框函数：

 $scope.checkboxes(formDTO.publication.publicationDrugTypes);

现在，空的数组（drugTypeIds）将获得publicationDrugTypes变量中id的值，HTML代码将选中正确的框。到目前为止一切正常
现在，如果用户想从drugTypes中添加/删除publication，HTML将使用控制器中的updateSelection()代码：

$scope.updateSelection = function (drugTypeId, publication, type){
                if ($scope.drugTypeIds.indexOf(drugTypeId)!==-1){
                    publication.publicationDrugTypes.splice(publication.publicationDrugTypes.indexOf($scope.publicationDrugTypes[drugTypeId-1]),1);
                    $scope.drugTypeIds.splice($scope.drugTypeIds.indexOf(drugTypeId));
                }
                else {
                publication.publicationDrugTypes.push({id:$scope.publicationDrugTypes[drugTypeId-1].id,name:$scope.publicationDrugTypes[drugTypeId-1].name}); $scope.drugTypeIds.push(drugTypeId);
            };

这段代码需要新的drugType的id，我们要添加它的publication和类型（这个变量当前未使用）
所以，现在它检查id是否在前一个列表中，如果是，它将删除它，如果不是，它将添加它。
添加在前端和数据库中都能很好地工作，就是在拼接时，我得到了几个同时取消选中自己的checkboxes，我不明白为什么它们都有不同的id，不同的条件，并且没有附加特定的模型。
我已经修改了ajsfiddle中的代码，错误只在您第一次运行时重现（与我的应用程序中每次都发生错误的情况不同），您需要首先单击按钮，以便运行第一个方法中的代码。当您试图取消选中Antidiabetic checkbox

最佳答案

在管理元素的插入/删除和检查时，几乎没有问题。我把逻辑简化了一点。
下面是您的示例，它应该满足您的要求：

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

app.controller('CountCtrl',function($scope){
  $scope.drugTypeIds = [];
  $scope.publicationDrugTypes = [
  	{ id:1, name:'Antimalarial' },
    { id:4, name:'Antidiabetic' },
    { id:3, name:'Antiretroviral' }
  ];
  $scope.publication = {id:1, publicationDrugTypes:$scope.publicationDrugTypes};

  $scope.isPublicationChecked = function (id) {
  	return findElementInPublication(id) > -1;
  };

  $scope.updateSelection = function (drugTypeId, type){
    var elementIndex = findElementInPublication(drugTypeId);
    if (elementIndex === -1) {
    	$scope.publicationDrugTypes.push({ id: drugTypeId, name: type });
    }
    else {
    	$scope.publicationDrugTypes.splice(elementIndex, 1);
    }
  	console.log($scope.publication);
  };

  function findElementInPublication(id) {
  	return $scope.publicationDrugTypes.findIndex(function(el) { return el.id === id; });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="CountApp" data-ng-controller="CountCtrl">
  <div class="btn btn-sm btn-primary">
    <input type="checkbox" id="check1" ng-checked="isPublicationChecked(1)" ng-click="updateSelection(1, 'antimalarials')"> Antimalarial
  </div>
  <div class="btn btn-sm btn-primary">
    <input type="checkbox" id="check2" ng-checked="isPublicationChecked(2)" ng-click="updateSelection(2, 'antibiotics')"> Antibiotic
  </div>
  <div class="btn btn-sm btn-primary">
    <input type="checkbox" id="check3" ng-checked="isPublicationChecked(3)" ng-click="updateSelection(3, 'antiretrovirals')"> Antiretroviral
  </div>
  <div class="btn btn-sm btn-primary">
    <input type="checkbox" id="check4" ng-checked="isPublicationChecked(4)" ng-click="updateSelection(4, 'antidiabetics')"> Antidiabetic
  </div>
  <div class="btn btn-sm btn-primary">
    <input type="checkbox" id="check5" ng-checked="isPublicationChecked(6)" ng-click="updateSelection(6, 'antituberculosis')"> Antituberculosis
  </div>
  <div class="btn btn-sm btn-primary">
    <input type="checkbox" id="check6" ng-checked="isPublicationChecked(5)" ng-click="updateSelection(5, 'maternal and reproductive')"> Maternal Health
  </div>

</div>

jsfiddle:https://jsfiddle.net/4vnuL4eL/16/