javascript Angularjs 将复选框设置为 true
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18895766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs setting checkbox to true
提问by suncoastkid
I'm trying to set a checkbox to true with Angularjs. Right now I'm cheating using vanilla javascript to manipulate the DOM, but I want to do it the right way with Angularjs.
我正在尝试使用 Angularjs 将复选框设置为 true。现在我正在欺骗使用 vanilla javascript 来操作 DOM，但我想用 Angularjs 以正确的方式做到这一点。
Here is the view:
这是视图：
<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>
And here is the relevant part of the controller:
这是控制器的相关部分：
if (document.getElementById(dep)) {
document.getElementById(dep).checked=true;
}
The dep value is equal to the addoncode value, so if it exists I check the box. This works and checks the box but how could I do this using the scope instead?
dep 值等于 addoncode 值，所以如果它存在，我选中该框。这有效并选中了框，但我怎么能使用范围来做到这一点呢？
I tried:
我试过：
x-ng-model="addon.addoncode"
with
和
$scope.addon.dep = true;
But no luck... any help appreciated. Thanks.
但没有运气......任何帮助表示赞赏。谢谢。
采纳答案by suncoastkid
This turned out to be a simple thing to do. Instead of using the checkbox id:
结果证明这是一件简单的事情。而不是使用复选框 ID：
document.getElementById(dep).checked=true;
I just needed to use the angular filter:
我只需要使用角度过滤器：
var x = filterFilter($scope.addons, {
addoncode: dep
});
x[0].checked = true;
回答by Maxim Shoustin
HTML
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>
Controller
控制器
function countController( $scope, $timeout )
{
$scope.addons = [
{
checked: true
},
{
checked: false
}
];
}
see in Fiddle
见 Fiddle
[EDIT]
[编辑]
The main point of angular is you don't need to worry about to update HTML. you just need change your $scope.addons.
angular 的要点是您无需担心更新 HTML。你只需要改变你的$scope.addons.
you can see how your code works with promises and how you add items every 3 sec to $scope.addons. I simulated async task by delayservice.
您可以看到您的代码如何与 Promise 配合使用，以及您如何每 3 秒向$scope.addons. 我通过delay服务模拟了异步任务。
BTW, I didn't touch your HTML
顺便说一句，我没有碰你的 HTML
回答by Eugenio Cuevas
Your object addononly exists inside the ng-repeat on your template. On the controller you should have something like:
您的对象addon仅存在于模板上的 ng-repeat 中。在控制器上，你应该有类似的东西：
$scope.addons[0].isChecked = true;
As addons is an array. Note that isChecked could take any property name
因为插件是一个数组。请注意， isChecked 可以采用任何属性名称
Then on the template use:
然后在模板上使用：
<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>
