使用带角度材料的标准输入复选框

时间:2016-11-28 00:33:43

标签: javascript angularjs checkbox angular-material

对于.NET表单,我们有正常的输入复选框吗?或者我是否必须创建自己的指令/修改材料以使其工作。

<md-checkbox ng-checked="$ctrl.checked = !$ctrl.checked">
    <input type="checkbox" name="test" value="1" />
</md-checkbox>

显然我可以在输入中添加相同的ng-checked属性,但我觉得这有点不必要,我会假设一个简单的名称属性会自动添加一个带有truthy值的隐藏复选框并自动切换嵌套复选框。

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
var app = angular.module('app', ['ngMaterial']);
app.controller('mainController', function() {});
&#13;
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.js"></script>

<div ng-app="app" ng-cloak>
  <div ng-controller="mainController">
    <md-switch ng-model="switch" aria-label="Switch 1">
      Set/Unset checkbox
    </md-switch>
    <input id="checkSlave" type="checkbox" ng-checked="switch">
    Of course the checkbox would normally be hidden
  </div>
</div>
&#13;
&#13;
&#13;