如何为angularjs中的角度材料复选框赋值答案

【问题标题】：How to assign value to angular material checkbox in angularjs如何为angularjs中的角度材料复选框赋值
【发布时间】：2016-01-04 14:31:15
【问题描述】：

我在我的应用程序中使用了 Angular Material 复选框。我在将值分配给复选框时遇到问题。

<div ng-repeat="rules in rulesList1.data.hits.hits">
    <md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-checked="_source.Enabled" class=" md-primary">
    </md-checkbox>
</div>

当我使用它时，我的复选框变得不可编辑。我无法选中或取消选中使用上述代码的框。我不知道我哪里错了。

提前致谢。

【问题讨论】：

你没有使用ng-model。
我也尝试过使用 ng-model 但这对我不起作用。这就是为什么我改成 ng-checked
你能创建一个小提琴来解释你的问题吗？
什么是规则。_source.IsEnabled？
@EmirMarques rules._source.IsEnabled。它的ng-repeat 值。我已经更新了我的代码。它将包含true 或false 值

标签： angularjs checkbox angularjs-ng-repeat angular-material

【解决方案1】：

我的问题已解决。问题是当我检索字符串格式的值时。在将其分配给视图ng-model 之前，将字符串转换为布尔值。

转换为布尔值后，我的复选框工作正常。

更新代码

<div ng-repeat="rules in rulesList1.data.hits.hits">
    <md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-model="_source.Enabled" class=" md-primary">
    </md-checkbox>
</div>

【讨论】：

【解决方案2】：

看这个：

<html lang="en" ng-app="StarterApp">
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
    <div ng-app="StarterApp" ng-repeat="rules in items">
        Test {{rules}}:
        <md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" class=" md-primary" ng-checked="rules.ck" ng-click="rules.ck=!rules.ck" ng-disabled="{{!rules.editable}}" role="checkbox">
        </md-checkbox>
    </div>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
    <script>
        var app = angular.module('StarterApp', ['ngMaterial']);

        app.controller('AppCtrl', ['$scope', function($scope){
            $scope.items = [{ck:true, editable:false}, {ck:true, editable:true}, {ck:false, editable:true}];
        }]);
    </script>
</html>

【讨论】：