1

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

5
  • Can you share plunk??? Commented Apr 8, 2015 at 10:22
  • can u just post a image made in paint or something so that we can know better what you want to achieve? Commented Apr 8, 2015 at 10:23
  • Hi @Reena plunker Commented Apr 8, 2015 at 10:39
  • You want same as this jsfiddle.net/zy7Rg/2 Commented Apr 8, 2015 at 11:32
  • Have a read github.com/fronteed/iCheck/issues/62 Commented Apr 8, 2015 at 11:47

1 Answer 1

1

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.

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

5 Comments

Hi @Ivan Burnaev , Thanks for your answer, but i want tick mark. when user checked that time color only changed, but instead of color change i want make act like HTML textbox. Can you please let me know if you know.
I've modified my fiddle jsfiddle.net/az3rq4na. But you can use any icons or css styles.
this dirctive is not working in IE8, can any one help me about
Hi @Ivan Burnaev, i need small help, i am getting always false when i checked or unchecked the check box, can you please help me why i am getting always false, please.
Hmm... You can check the same fiddle jsfiddle.net/az3rq4na/2. Model changes correctlly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.