文章/答案/技术大牛

发布

社区首页 >问答首页 >复选框不会在材料设计和角度中动态更改状态

问复选框不会在材料设计和角度中动态更改状态
EN

Stack Overflow用户

提问于 2015-10-16 01:50:15

回答 1查看 1.1K关注 0票数 1

交换机和我希望通过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

javascript

angularjs

checkbox

material-design

回答 1

Stack Overflow用户

发布于 2015-10-16 03:35:33

我不能让你的codepen打开，但我用你的例子创建了一个柱塞。我已经更新了它，展示了如何在你的控制器中设置复选框值。如果为复选框设置了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;
});

有更多的最佳方法可以做到这一点，但这足以让你开始。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33155252

复制

相似问题

问复选框不会在材料设计和角度中动态更改状态
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问复选框不会在材料设计和角度中动态更改状态EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问复选框不会在材料设计和角度中动态更改状态
EN