Question

我正在尝试使用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值等于addoncode值，所以如果它存在，我选中该框。这可以工作并检查框，但我怎么能使用范围来做呢？

我试过了：

x-ng-model="addon.addoncode"

与

$scope.addon.dep = true;

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

Answer 1

<强> 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
   }
];   
}

参见 Fiddle

<强> [编辑]

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

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

Fiddle 2

是的，我没有触摸你的HTML

Answer 2

您的对象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>

Answer 3

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

document.getElementById(dep).checked=true;

我只需要使用角度过滤器：

var x = filterFilter($scope.addons, {
    addoncode: dep
});                 

x[0].checked = true;

Angularjs将复选框设置为true

3 个答案: