How to assign value to angular material checkbox in angularjs

Question

I am using the Angular Material checkbox in my application. I am facing problem in assigning the value to a checkbox.

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

When I use this my checkbox becomes non-editable. I couldn't check or uncheck the box on using the above code. I don't know where I am going wrong.

Thanks in advance.

I tried using ng-model also but that doesn't worked for me . Thats why I changed to ng-checked — Mangoski, Oct 07 '15 at 11:29
@EmirMarques rules._source.IsEnabled. Its `ng-repeat` value. I have updated my code. It will contain `true` or `false` value — Mangoski, Oct 07 '15 at 11:32

score 1 · Accepted Answer · answered Oct 08 '15 at 07:09

My issue was resolved. The problem is when I retrieve the value it was in string format. Before assigning it to the view ng-model, convert the string into boolean.

After coverting to boolean my checkbox works fine.

Updated code

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

Emir Marques · Answer 2 · 2015-10-07T11:52:46.063

Look this:

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

How to assign value to angular material checkbox in angularjs

2 Answers2