CODEWITHSUNDEEP
angularjscheckboxangularjs-ng-repeatangular-material
Mangoski
Mangoski

Reputation: 2119

How to assign value to angular material checkbox in angularjs

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.

Upvotes: 2

Views: 16209

Answers (2)

Mangoski
Mangoski

Reputation: 2119

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>

Upvotes: 1

Emir Marques
Emir Marques

Reputation: 2687

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>

Upvotes: 0

Related Questions