javascript - Angular 复选框不独立

Question

我遇到了一个特殊的问题 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，这发生在 Controller 中，使用以下方法:

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

现在为 null 的数组( drugTypeIds )将获取 publicationDrugTypes 中的 id 值变量和 HTML代码将选中右侧的框。到目前为止，一切正常

现在，如果用户想要添加/删除 drugTypes来自publication ，HTML 使用 updateSelection()来自 Controller 的代码:

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

此代码需要新的 ID drugType ，publication我们将添加它和类型(此变量当前未使用)

所以，现在它会检查该 id 是否在之前的列表中，如果是，则会删除它，如果没有，则会添加它。

添加在前端和数据库中都工作得很好，在拼接时我得到了几个 checkboxes同时取消选中它们自己，我不明白为什么，因为它们都有不同的 ID、不同的条件并且没有附加特定的模型。

我已将代码改编为 jsfiddle ，该错误仅在您第一次运行时才会重现(与我的应用程序中每次都会发生的情况不同)，并且您需要先单击该按钮，以便第一个方法中的代码将运行。当您尝试取消选中 Antidiabetic checkbox 时，将出现此错误

Answer 1

您在管理插入/删除和元素检查方面遇到了一些问题。我稍微简化了逻辑。 这里的示例应该可以满足您的需求:

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/