Adding / removing checked attribute for dynamiclly flag in angularjs

Question

How can I just add and remove a verified attribute in a check-box using angularjs. I found a solution from this question, but it requires jQuery

Is there any other way to do this without using jQuery?

Here is what I 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 uninstall does not work

Answer 1

This is Angularjs recommended 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; } } 

Answer 2

You do not need a special directive for this, ngChecked will 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> 

Answer 3

Please check the 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; } }); 

Answer 4

I can add a dynamic attribute through the directive, maybe this will 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 like

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