在材质设计和angularjs中不动态改变状态的复选框

Checkbox not changing state dynamically in material design and angularjs

本文关键字：动态 改变 状态 复选框 angularjs      更新时间：2023-09-26

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

我把这个问题复制到下面的代码中。谁能帮个忙?

<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。我已经更新了它，以显示如何从控制器设置复选框值。如果为复选框设置ng-model，则可以从控制器中定义值。

http://plnkr.co/edit/zovPe9Zvzl0u3VElRvbI?p =

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

有更多的最佳方法，但这足以让你开始。

相关文章：