Adding/Removing checked attribute to checkbox dynamiclly in angularjs

Question

How can i simply add and remove checked attribute to check-box using angularjs. I've find solution from this question,but it requires Jquery

Is any other way to do this without using Jquery?

Here is what i am tried

<input type="checkbox" id="test"  class="switch__input" checked="{{checkVal}}">
<input type="button" ng-click="test()" value="test">

JS

 module.controller('settingsCtrl',function($scope){
  //for adding
  $scope.checkVal="checked";
  //for removing checkbox
  $scope.test=function(){
   $scope.CheckVal="";
  }
}

But the removing wont work

Looks like you have a typo. The second CheckVal is capitalized. — Isaac
– Isaac, Commented Aug 13, 2015 at 6:21

venkat7668 · Accepted Answer · 2015-08-13 06:28:07Z

7

This is Angularjs recommended way of check and un check checkbox

HTML : <input type="checkbox" ng-model="checkVal" ng-true-value="true" ng-false-value="false">

Also works

<input type="checkbox" ng-checked="checkVal">

JS :

module.controller('settingsCtrl',function($scope){
  //for adding
  $scope.checkVal=true;
  //for removing checkbox
  $scope.test=function(){
   $scope.checkVal=false;
  }
}

edited Aug 13, 2015 at 6:28

answered Aug 13, 2015 at 6:20

venkat7668

2,7971 gold badge24 silver badges28 bronze badges

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

Comments

dfsq · Accepted Answer · 2015-08-13 06:21:27Z

1

You don't need special directive for this, ngChecked would work well:

var app = angular.module('demo', []).controller('MainController', function($scope) {
  $scope.checkVal = true;

  $scope.test = function() {
    $scope.checkVal = !$scope.checkVal; // or false
  };
});

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<div ng-app="demo" ng-controller="MainController">
    <input type="checkbox" id="test" class="switch__input" ng-checked="checkVal">
    <input type="button" ng-click="test()" value="test">
</div>

answered Aug 13, 2015 at 6:21

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

User2 · Accepted Answer · 2015-08-13 06:23:37Z

1

Please check working example : DEMO

HTML

<input type="checkbox" id="test" class="switch__input" ng-checked="checkVal">
<input type="button" ng-click="test()" value="test">

Controller:

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

app.controller('MainCtrl', function($scope) {

    $scope.checkVal = true;
    //for adding/removing checkbox
    $scope.test = function() {
           $scope.checkVal = !$scope.checkVal;
    }
});

answered Aug 13, 2015 at 6:23

User2

1,3038 silver badges17 bronze badges

Comments

Hmahwish · Accepted Answer · 2015-08-13 06:18:11Z

0

I can across a directive to add dynamic attribute may be this can help you

  myApp.directive('dynAttr', function() {
return {
    scope: { list: '=dynAttr' },
    link: function(scope, elem, attrs){
        for(attr in scope.list){
            elem.attr(scope.list[attr].attr, scope.list[attr].value);   
        }
        //console.log(scope.list);           
    }
};
});

In the controller

$scope.attArray = [
{ attr: 'myattribute', value: '' }
];

Use it as

<input dyn-attrs="attArray"></input>

answered Aug 13, 2015 at 6:18

Hmahwish

2,2328 gold badges27 silver badges45 bronze badges

1 Comment

shamon shamsudeen Over a year ago

There is no way without using directive?

Collectives™ on Stack Overflow

Adding/Removing checked attribute to checkbox dynamiclly in angularjs

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related