我应该如何使用 AngularJS 取消选择已经在 HTML 页面中选择的 Chekbox

Question

>我的html中有复选框，如下所示，

<div ng-repeat="fruit in fruits">
    <input type="checkbox" name="{{fruit.name}} ng-model="fruit.value" 
         ng-checked="isChecked(fruit)" ng-change="changed(fruit)" ng-required="true" ">{{fruit.name}}
</div>
<input type="hidden" ng-model="selectedFruits"> 

我有角度的js代码如下，

    $scope.fruits=[{name:"Mango", value:false},{name:"Apple", value:false},{name:"Banana", value:false}];
var array=["Apple","Banana"];
$scope.isChecked = function(fruit){
     for(var I=0; I <array.length; I++){
              if(fruit.name == array[I]){
                 fruit.value=true;
              }
           }  
}
$scope.changed= function(fruit){
   var selectFruit ='';
   $scope.fruits.forEach(function(fruit){   
      if(fruit.value){
         if(selectFruit){
            selectFruit += '-';
         }
         selectFruit += fruit.name;
      }
   })
   $scope.selectedFruits = selectFruit;
}

该隐藏字段用于在"选定的水果"中附加选定的复选框名称。[例如芒果苹果]

从上面的代码中，我默认在 html 页面中选中复选框，如数组中的苹果和香蕉。

我的问题是当我尝试取消选择该复选框(苹果/香蕉(时，它不会被取消选择。它始终仅显示选中项。我应该如何取消选中该复选框？有人可以帮我吗？

Answer 1

在 HTML 中进行一些更改：
这里

<div ng-repeat="fruit in fruits">
    <input type="checkbox" name="{{fruit.name}} ng-model="fruit.value" 
         ng-click="isChecked(fruit)" required>{{fruit.name}}
</div>
<input type="hidden" ng-model="selectedFruits"> 

编辑

var array=["Apple","Banana"];
   for(var I=0; I <array.length; I++){
      if(fruit.name == array[I]){
         fruit.value=true;
      }
   }  

将此内容放在选中的函数之外或创建一个新函数并将此代码放入其中并在您想要的任何位置调用它

编辑-2

selectAppleBanana();
function selectAppleBanana(){
  for(var I=0; I <array.length; I++){
     for(var J=0;J<$scope.fruits;J++){
         if($scope.fruits[J].name == array[I]){
            $scope.fruits[J].value=true;
         }
     }
   }    
}
$scope.isChecked = function(fruit){
   //don't call it here otherwise it won't get deselected ever
   //selectAppleBanana();
   var selectFruit ='';
   $scope.fruits.forEach(function(fruit){   
      if(fruit.value){
         if(selectFruit){
            selectFruit += '-';
         }
         selectFruit += fruit.name;
      }
   })
   $scope.selectedFruits = selectFruit;
}