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.
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>
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>
ng-model.ng-repeatvalue. I have updated my code. It will containtrueorfalsevalue