Question

我正在尝试md-checkbox表现得像Angular 1中的单选按钮。我尝试使用以下代码并且无法正常工作。有可能吗？

<md-checkbox class="md-primary" ng-model="color" name="color" ng-repeat="c in colors" ng-true-value="'{{c.id}}'" ng-false-value="">
    {{c.name}}
</md-checkbox>

提前致谢。

Answer 1

当您需要单选按钮时，请勿使用复选框。如果您希望单选按钮具有复选标记，请将md-checkbox使用的相同类应用于单选按钮。

为了美观，使用错误的表单控件是一个非常糟糕的主意;有各种各样的可访问性问题，例如如何在移动设备上，屏幕阅读器为盲人处理等等。以这种方式思考，如果你想要一个红色按钮，你可以将按钮设置为红色。在这种情况下，只需将收音机的样式设置为支票。

Answer 2

如果你将像ng-true-value="{{c.id}}"

那样通过，

应该有效

根据角度材料documentation：

ng-true-value - expression - 选中时应设置表达式的值。

Answer 3

应该如下，

 <md-checkbox class="md-primary" ng-model="color" name="color" ng-repeat="c in colors" ng-true-value="'c.id'" ng-false-value="">
        {{c.name}}
 </md-checkbox>

<强>样本

// Code goes here

var app = angular.module('app', ["ngMaterial"]);
app.controller('myCtrl', function($scope) {
  $scope.colors = [{
    id: '001',
    name: "pink"
  }, {
    id: '002',
    name: "yellow"
  }];


});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Test angular md-select with material 0.11.0</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
</head>
<body ng-controller="myCtrl">
   <md-checkbox class="md-primary" ng-model="color" name="color" ng-repeat="c in colors" ng-true-value="'c.id'" ng-false-value="">
    {{c.name}}
  </md-checkbox>
</body>

</html>

Answer 4

您不必在每个复选框中使用ng-model。如果您利用ng-checked和ng-click ... PLUNKER

，这非常简单

<强> HTML：

<md-checkbox ng-repeat="c in colors"
           ng-click="setSelectedColor(c)"
           ng-checked="c.id === selectedColor.id">
    {{c.name}}
</md-checkbox>

<强> CONTROLER：

app.controller('MainCtrl', function($scope) {
    $scope.colors = [{id: 1, name: 'red'}, {id: 2, name: 'green'}];
    $scope.selectedColor; //You can set a initial selection if you want

    $scope.setSelectedColor = function(c){
        $scope.selectedColor = c;
    };
});

md-checkbox表现得像单选按钮 - AngularJS

4 个答案: