Angularjs 设置复选框为 true

Angularjs setting checkbox to true

本文关键字：true 复选框 设置 Angularjs      更新时间：2023-09-26

我正在尝试使用 Angularjs 将复选框设置为 true。现在我正在使用vanilla javascript来操纵DOM，但我想用Angularjs以正确的方式做到这一点。

以下是视图：

<div x-ng-repeat="addon in addons">
  <label for="{{addon.addoncode}}">
    <input type="checkbox"  
    name="{{addon.addoncode}}" 
    value="{{addon.addoncode}}"  
    id="{{addon.addoncode}}"  
    x-ng-model="addon.checked" 
    x-ng-click="checkAddonDependencies()"  >
   <span x-ng-bind-html="addon.addon_desc">{{addon.addon_desc}}</span> </label>
</div>

这是控制器的相关部分：

 if (document.getElementById(dep)) {
    document.getElementById(dep).checked=true;
     }

dep 值等于插件代码值，所以如果存在，我选中该框。这有效并选中该框，但我如何使用范围来执行此操作？

我试过了：

x-ng-model="addon.addoncode"

跟

$scope.addon.dep = true;

但是没有运气...任何帮助表示赞赏。谢谢。

HTML 

<div ng-repeat="addon in addons">
  <label for="{{addon.addoncode}}">
   <input type="checkbox"  
     name="{{addon.addoncode}}" 
     value="{{addon.addoncode}}"  
     id="{{addon.addoncode}}"  
     ng-model="addon.checked" 
     ng-click="checkAddonDependencies()"  >
  <span ng-bind-html="addon.addon_desc">{{addon.addon_desc}}</span> </label>
 </div>

控制器

function countController( $scope, $timeout )
{
$scope.addons = [
   {
       checked: true
   },
    {
       checked: false
   }
];   
}

见小提琴

[编辑]

角度的要点是你不需要担心更新HTML。 你只需要改变你的$scope.addons。

您可以看到您的代码如何与 promise 一起工作，以及如何每 3 秒向 $scope.addons 添加项目。我通过delay服务模拟了异步任务。

小提琴 2

顺便说一句，我没有碰你的HTML

您的对象addon仅存在于模板上的 ng-repeat 中。在控制器上，您应该具有类似以下内容的内容：

$scope.addons[0].isChecked = true;

因为插件是一个数组。请注意，isChecked 可以采用任何属性名称

然后在模板上使用：

<div x-ng-repeat="addon in addons">
  <label for="{{addon.addoncode}}">
    <input type="checkbox" x-ng-model="addon.isChecked" x-ng-click="checkAddonDependencies()"  >
   <span x-ng-bind-html="addon.addon_desc">{{addon.addon_desc}}</span> </label>
</div>

事实证明这是一件简单的事情。不使用复选框 ID：

document.getElementById(dep).checked=true;

我只需要使用角度滤镜：

var x = filterFilter($scope.addons, {
    addoncode: dep
});                 
x[0].checked = true;
相关文章：