Aggiunta/Rimozione di attributo selezionato alla casella di controllo dinamicamente in angularjs

Question

Come posso semplicemente aggiungere e rimuovere l'attributo selezionato alla casella di controllo usando angularjs. Ho trovato la soluzione dalla domanda this, ma richiede Jquery

C'è un altro modo per farlo senza usare Jquery?

Ecco quello che sto provato

<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=""; 
    } 
} 

Ma la rimozione non funzionerà

Answer 1

Questo è Angularjs modo consigliato assegno e di controllo delle Nazioni Unite di

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

anche wo RKS

<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

posso attraverso una direttiva per aggiungere attributo dinamico può essere questo può aiutare 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);   
    } 
}; 
}); 

Nel controllore

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

usarlo come

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

Answer 3

Non è necessario direttiva speciale per questo, ngChecked dovrebbe funzionare bene:

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 4

Si prega di c diamine esempio funzionante: 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; 
    } 
});