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

时间:2015-10-15 17:50:15

标签: javascript angularjs checkbox material-design

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

我在以下codepen上复制了问题。任何人都可以帮忙吗?

Set

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

1 个答案:

答案 0 :(得分:0)

我无法让你的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;
});

有更多最佳方法可以帮助您入门。