CODEWITHSUNDEEP
cssangularjsangularjs-directive
Question
Question

Reputation: 57

Create Custom Directive for Custom Check box in Angular js

Hi any one please help me...

I want create custom directive for custom check box in Angular js,

I am done creating box, i want create check mark when we click checked.

HTML Code ::::

 <my-checkbox ng-transclude class="customCheeckBox" style="margin:5px;"></my-checkbox>

Custom Directive code:

App.directive('myCheckbox', function(){
  return {
      restrict: 'E',
      replace: true,
      transclude:true,
      template: '<div class="checkbox" ng-class="{checked: isChecked}" ng-click="toggleMe()"></div>',
      scope: {
        isChecked: '=?'
      },
      link: function (scope, elem, attrs) {
        scope.isChecked = true;

        scope.toggleMe = function () {
          scope.isChecked = !(scope.isChecked);  
          console.log('clicked');
        }
      }
  }});

CSS code:

.checked {
  background-color:red;
}
.customCheeckBox{
    border: 1px solid black;
  height: 15px;
  width: 15px;
}

I want check mark for when we selected the check box.

Can any please help me

Upvotes: 1

Views: 2584

Answers (1)

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

You forget about: require: "ngModel" https://jsfiddle.net/az3rq4na/. Your checkbox should contain any model to show it's state. Read more about ngModelController at official site.

Upvotes: 1

Related Questions