我应该如何使用angularjs取消选择html页面中已经选择的复选框？

Posted 2023-05-09

【中文标题】我应该如何使用angularjs取消选择html页面中已经选择的复选框？

【英文标题】：how should i deselect the chekbox that is already selected in html page using angularjs?

【发布时间】：2017-10-18 00:11:12

【问题描述】：

我的 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;

该隐藏字段用于在“selectedFruits”中附加选定的复选框名称。 [前任。芒果-苹果]

从上面的代码中，我在 html 页面中默认选中的复选框是数组中的 Apple 和 Banana。

我的问题是，当我尝试取消选择该复选框（Apple/banana）时，它不会被取消选择。它总是只显示选中的。 我应该如何取消选中该复选框？ 有人可以帮我吗？

【问题讨论】：

ng-model="fruit.value"

对不起..我在 ng-model 中输入了错误的 。我只使用 ng-model="fruit.value"。

如果需要任何其他更改，您能再看看吗？ @Satpal

【参考方案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;
      
     

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

EDIT-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;

【讨论】：

使用 ng-click 时，默认情况下我没有得到 Apple 和 Banana 的选中复选框。当我加载页面时，没有选中任何复选框。

不..不工作..默认情况下不显示复选框并且在选择不附加到该隐藏字段后也不显示

回答这个“我的问题是当我试图取消选择复选框（Apple/banana）时，它不会被取消选中。它总是只显示选中。我应该如何取消选中该复选框？可以有人请帮帮我吗？”我已经更新了 EDIT-2，所有其他的事情都和你之前做的一样

每次您更改某些内容时，isChecked 都会被调用，不管您在做什么（选择/取消选择苹果、香蕉），但 isChecked 会将其更新为仅已检查。要么实现我上次的编辑，要么删除 ng-checked。

在您的第二次编辑中，我没有将 Apple 和banana 作为选中的复选框。全部都被取消选中。我使用了和你一样的代码。