AngularJS - How do I check a checkbox inside of a directive?

Question

I am new to AngularJS so I am still trying to get a grasp on the best practices and the "Angular way" of doing things. With that being said, here is my situation:

I am trying to submit an AngularJS form. Part of the form is a list of blog names that I want the user to choose from. Inside each <li> is a checkbox. When the user clicks on the li, I want to check the checkbox so that when the form is submitted, it records the selected blog names.

<li>
    <div>
        <img ng-src="{{ image }}" />
    </div>
    <div>
        {{ name }}
    </div>
    <input type="checkbox" name="blogs[]" value="{{ name }}" style="display: none">
</li>

Now, I need this exact list item in 3 different lists. So I thought the way I should do it, is make it a directive:

The JS

angular
  .module('app')
  .directive('blogSelect', function(){
    return {
        restrict: 'E',
        template: '<li ng-click="onClick()"><div><img ng-src="{{ image }}" /></div><div >{{ name }}</div><input type="checkbox" name="blogs[]" value="{{ name }}" style="display: none"></li>',
        replace: true,
        scope: {
            image: '@image',
            name: '@name'
        },
        link: function($scope, $element, attrs) {
        $scope.onClick = function() {
            $element.toggleClass("selected");

            var checkbox = $element.find('input[type="checkbox"]');
            checkbox.attr("checked", !checkbox.attr("checked"));
        }
      }
    };
  });

The HTML

<ul ng-if="vm.blogs.length">
   <blog-select ng-repeat="blog in vm.blogs"
       name="{{blog.name}}"
       image="/url/to/img/{{ blog.name }}.jpg">
   </blog-select>
</ul>

Something doesn't seem right here. The checkbox variable in the onClick function is undefined. After some research, I don't think I am doing it the correct way. Should I be controlling the checkbox based on an array in my model (where the vm.blogs is coming from)? I can't seem to find anything that describes what to do with a custom checkbox directive in my situation.

But then again, maybe I'm not even going about it the right way? Any wisdom, insight, and/or help is appreciated. Thanks!

Tetsujin no Oni · Accepted Answer · 2016-08-17 14:37:38Z

2

You're thinking in a DOM-manipulation manner rather than an Angular MV* manner.

It's true that you have an element which you wish to bind to behavior

You have a directive that encapsulates and defines the behavior, but you're reaching for the "how do I poke values into the DOM?" tools that you're accustomed to, rather than the "how do I expose information in an object model through scope to the DOM?"

You should manipulate the value the element is bound to in the directive, therefore adding the ng-checked directive to your input and using its binding to control the checked state of the checkbox is what you're looking for.

See https://docs.angularjs.org/api/ng/directive/ngChecked for details.

answered Aug 17, 2016 at 14:37

Tetsujin no Oni

7,3652 gold badges31 silver badges46 bronze badges

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

1 Comment

blbaker Over a year ago

Thanks for the help. That put me in the right direction!

distante · Accepted Answer · 2016-08-17 14:35:14Z

0

You could use the ngChecked directive to compare the states of the inputs: http://www.w3schools.com/angular/ng_ng-checked.asp

Official documentation: https://docs.angularjs.org/api/ng/directive/ngChecked

answered Aug 17, 2016 at 14:35

distante

7,1016 gold badges63 silver badges106 bronze badges

Collectives™ on Stack Overflow

AngularJS - How do I check a checkbox inside of a directive?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related