开关,我想通过 angularjs Controller 动态控制它们的状态。 但它没有按预期工作。
我在以下代码笔上复制了该问题。谁能帮忙快点吗?
<html ng-app="">
<head >
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"> </script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body ng-init="check={}">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" ng-click="check.set=!check.set" />
<span class="mdl-switch__label"></span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" ng-model="check.set" ng-checked="check.set"/>
<span class="mdl-switch__label"></span>
</label>
{{check.set}}
</body>
</html>
最佳答案
我无法打开你的codepen,但我用你的例子创建了一个plunker。我已更新它以展示如何从 Controller 设置复选框值。如果您为复选框设置 ng-model,则可以从 Controller 定义值。
http://plnkr.co/edit/zovPe9Zvzl0u3VElRvbI?p=preview
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" ng-model="check[0]" />
<span class="mdl-switch__label"></span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" ng-model="check[1]"/>
<span class="mdl-switch__label"></span>
</label>
app.controller('MainCtrl', function($scope) {
$scope.check = [];
// Set value
$scope.check[0] = true;
$scope.check[1] = false;
});
有更优化的方法可以做到这一点,但这足以让您开始。
关于javascript - 复选框在 Material 设计和 angularjs 中不会动态更改状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33155252/