javascript - 复选框在 Material 设计和 angularjs 中不会动态更改状态

标签 javascript angularjs checkbox material-design

开关,我想通过 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>

https://codepen.io/anon/pen/pjWQZb

最佳答案

我无法打开你的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/

相关文章:

javascript - 无法更改 Angular JS 中的位置路径

javascript - 在探索 Angular2 之前是否有必要先学习 TypeScript?

javascript - 使用 moment.js 在 javascript 中显示 json 中的日期时间,无需格式化为区域设置时区

java - 在Android中访问ListView复选框

javascript - 如果选中一个复选框,如何取消选中所有复选框?

c# - WPF 复选框与多行内容左上角对齐

javascript - 如何在选择选项中使用 jQuery 隐藏效果

javascript - X3DOM 是否有任何 "finished loading"事件?

javascript - (Javascript) 使用文件路径创建一个 File 对象

javascript - 未知提供商 : $scopeProvider When Testing Angular Controller With Jasmine