如何为 angularjs 中的 angular material 复选框赋值

Question

我在我的应用程序中使用 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>

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

提前致谢。

Answer 1

看这个：

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

Answer 2

我的问题已解决。问题是当我检索它是字符串格式的值时。在将其分配给视图 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>

如何为 angularjs 中的 angular material 复选框赋值

How to assign value to angular material checkbox in angularjs

angularjs

checkbox

angularjs-ng-repeat

angular-material