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

Question

对于 .NET 表单，有没有办法让我们正常输入复选框？还是我必须创建自己的指令/修改材料以使其正常工作。

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

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

Answer 1

var app = angular.module('app', ['ngMaterial']);
app.controller('mainController', function() {});

<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>