复选框不会在材料设计和 angularjs 中动态改变状态答案

【问题标题】：Checkbox not changing state dynamically in material design and angularjs复选框不会在材料设计和 angularjs 中动态改变状态
【发布时间】：2016-01-14 07:23:13
【问题描述】：

开关，我想通过 angularjs 控制器动态控制它们的状态。但它没有按预期工作。

我在下面的 codepen 上复制了这个问题。谁能快速帮忙？

<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

【问题讨论】：

标签： javascript angularjs checkbox material-design

【解决方案1】：

我无法打开您的 codepen，但我使用您的示例创建了一个 plunker。我已经更新它以展示如何从您的控制器设置复选框值。如果为复选框设置 ng-model，则可以从控制器定义值。

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;
});

有更多的最佳方法可以做到这一点，但足以让您入门。

【讨论】：