Binding a checkbox in Angularjs in Directive

Question

I have a plunk at http://plnkr.co/PF7cRQE4n5lYube8oa3t

The templateUrl points to control.html with the following code.

hello from Directive
<br />{{message}}
<br />
<input type="checkbox" {{checkedstatus}} />
<br />Value of Checked Status = {{checkedstatus}}

My controller and directive is as follows...

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
})
  .directive('myDir', function() {
    var linkFunction = function(scope, element, attributes){
      scope.message = "The check box should be checked... no?";
      scope.checkedstatus = "checked";
    }

    return {
      restrict: 'E',
      templateUrl: "control.html",
      link: linkFunction,
      scope: {}
    };
  })

My index.html file is straight forward and is using the directive...

<my-dir></my-dir>

I was assuming that if checkedstatus is set to "checked" I will see the checkbox as checked in the UI. But it doesn't happen that way and remains unchecked. My goal is to use this Checkbox as a toggle button to view or hide certain elements of my view.

Try using this pattern > vitalets.github.io/checklist-model

Sunil Kumar
– Sunil Kumar

2015-05-12 03:45:07 +00:00
Commented May 12, 2015 at 3:45 — Sunil Kumar
– Sunil Kumar, Commented May 12, 2015 at 3:45

Anik Islam Abhi · Accepted Answer · 2015-05-12 03:53:47Z

2

you can use ng-checked

scope.checkbox={
    checkedstatus:true
};

<input type="checkbox" ng-checked="checkbox.checkedstatus" />

Or you can bind model

like this

<input type="checkbox" ng-model="checkbox.checkedstatus" />

Check on plunkr

http://plnkr.co/edit/qkWyqrLBwYKv1ECZ0WHE?p=preview

edited May 12, 2015 at 3:53

answered May 12, 2015 at 3:47

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anik Islam Abhi Over a year ago

I have attached the link of plunkr

Collectives™ on Stack Overflow

Binding a checkbox in Angularjs in Directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related