I need to toggle a class if a checkbox is checked/unchecked with AngularJS. My Code is working on Plunker but in my controller there is no functionality.
Here is the Plunker: Click!
My Controller looks like this:
angular.module('inspinia')
.controller('MainController', function ($location, $scope, $state) {
// initialize iCheck
angular.element('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green'
});
//Checkbox functionality
$scope.isChecked = function() {
if ($scope.checked) {
return false;
}else{
return true;
}
};
});
HTML
<div class="panel panel-default confirm-panel accept-terminplanung">
<div class="panel-body text-muted ibox-heading">
<form action="#" method="post" role="form">
<div class="i-checks" iCheck>
<label class="">
<div class="icheckbox_square-green">
<input type="checkbox" class="i-checks" ng-model="checked">
</div>
<p class="no-margins">Hiermit akzeptiere ich die Bedingungen des geschlossenen Dozentenvertrages und nehme den Bildungsauftrag für die ausgewählten Ausbildungen verbindlich an.</p>
</label>
</div>
<button type="button" name="termin-bestaetigen" class="btn btn-w-m btn-warning submit-appointment disabled" ng-class="{disabled: isChecked()}">Terminplanung übernehmen</button>
</form>
</div>
</div>
What am I doing wrong?
As I can understand from the provided piece of code iCheck is something that is not working in angular scope, like JQuery. So every time your value inside this component changes you need to trigger a $digest cycle with a use of $scope.$digest() or $scope.$apply().
In iCheck documentation you can find callbacks section, so you can subscribe to that event and do $scope.$apply() in it.
For example, inside your controller:
<your-iCheck-element>.on('ifChecked', function(event){
$scope.$apply();
});
Your function is basically doing nothing, but giving back the opposite value of checked. You can simply use negation of your model.
ng-class="{disabled: !checked}"
Related
I am trying to use a simple input that can be retrieved by a cookie automatically.
My angular controller is :
<script>
var app = angular.module('mantis', ['ngCookies']);
app.controller('main', function($scope, $cookies) {
$scope.nom = '';
$scope.WriteNom = function () {
$cookies.put('Nom', $scope.nom);
};
$scope.ReadNom = function () {
$scope.nom = $cookies.get('Nom');
return $scope.nom;
};
});
</script>
In my page, I made a div where I can change the variable "nom" flawlessly.
The value should be loaded with ng-init (from cookie)
It changes with ng-model
And it should be saved with ng-click
<div class="container" ng-app="mantis" ng-controller="main">
<!-- Assigné à -->
<div class="col-lg-12">
<div class="input-group" ng-init="nom=ReadNom()">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="nom" type="text" class="form-control" name="nom" placeholder="Assigné à (id)" ng-model="nom">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" ng-click="WriteNom()">Sauvegarder</button>
</span>
</div>
</div>
(...)
And then, somewhere else, i can use "nom" where I need it by using {{nom}}
It's almost working :
The value is properly changed when I type in the input box and I can use it
The cookie is not changed when I click on the button nor it's loaded when I load the page
Remove the return part,
HTML:
<div class="input-group" ng-init="ReadNom()">
Controller:
$scope.ReadNom = function () {
$scope.nom = $cookies.get('Nom');
};
DEMO
Please run this plunker, if you enter a value in the modal and then click on show value, the value is undefined in $scope, how to get the value?
HTML
<div ng-app="app" ng-controller="myCtl">
<input type="button" ng-click="openModal()" value="Open Modal">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>
<form name="myForm" novalidate>
Enter a value <input type="text" ng-model="someField" />
</form>
<div class="modal-footer">
<button ng-click="showValue()">Show value</button>
</div>
</script>
</div>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myCtl', function($scope,$uibModal) {
$scope.openModal = function() {
$scope.modalInstance = $uibModal.open({
animation: false,
templateUrl: 'myModalContent.html',
scope: $scope
});
};
$scope.showValue = function() {
alert('value entered=' + $scope.someField);
};
});
You are seeing this because the scope of the modal is isolated. Even though you pass the $scope to modal. It still does not use the same $scope.
For your example the following would work.
Update the modal template:
<button ng-click="showValue(someField)">Show value</button>
Update your controller showValue method as follows:
$scope.showValue = function(theValue) {
$scope.someField = theValue;
alert('value entered=' + $scope.someField);
};
Really though the best way to use the modal is to use the modal instance created by the open method to track the close and dismiss events and handle the result that way. Take a look at the example on on the ui-modal section of the ui-bootstrap documentation
What I'am trying to do is convert every user input into a label using angular. I believe that I'am doing the right thing, but is not working. I will appreciate if somebody take a look at this code. Thank you
here is a plunker
<div class="row" ng-controller="tagForm">
<div ng-click="addEntry()">
<div class="col-xs-12 col-sm-12 col-md-10 ">
<input type="text" placeholder="What are your area of expertise" ng-model="newEntry.name" class="form-control border" />
</div>
<div class="col-xs-12 col-md-2 center form-button">
<input type="button" value="Add" class="btn btn-orange btn-add" />
</div>
<div class="col-md-8 col-sm-offset-2" id="up">
<br />
<span class="label label-primary" ng-repeat="entry in entries">{{entry.name}}</span>
</div>
</div>
</div>
app.controller('tagForm', ['$scope', function($scope) {
return $scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
return $scope.newEntry = {};
};
}]);
You have a few things wrong in your Plunk, but here's some stuff to start with:
You need to wire up a click event on your Add button. Right now, its not doing anything when you click it
Bind to an ng-model on the scope just using 'newEntry'. All you're typing is a name so thats all you need to save on the scope.
Loop over entries, printing out just 'entry' instead of 'entry.name'
And your controller should look like this (no need for the returns)
app.controller('tagForm', ['$scope', function($scope) {
$scope.entries = [];
$scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
};
}]);
See this fiddle:
http://jsfiddle.net/smaye81/anrv2qms/1/
I have a simple GUI I would like to implement via pure AngularJS - there are two (or more) groups of checkboxes like here: http://jsbin.com/cemitubo/2/edit
Here is the code from the link below:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<div class="group">
<input type="checkbox" ng-model="tag.aaa"/>
<input type="checkbox" ng-model="tag.ccc"/>
</div>
<div class="group">
<input type="checkbox" ng-model="tag.zzz"/>
</div>
{{tag}}
</div>
JS:
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.tag = {aaa: true};
});
Once A checkbox of one of the groups is checked all the checkboxes of the other groups should be unchecked (and the change obviously should be reflected in the model).
I tried to $watch the tag model variable and setting false to the variables of the other groups in $watch callback. The problem is that it fires the $watch callback each time tag is changed by $watch callback.
What is the proper AngularJS solution?
Thanks in advance!
Use ng-change instead $watch:
Something like:
$scope.changed = function(item, type){
console.log(item);
if((type == 'aaa' || type == 'ccc') ){
$scope.tag.zzz = !item;
}
else if(type == 'zzz'){
$scope.tag.aaa = !item;
$scope.tag.ccc = !item;
}
}
HTML
<div class="group">
<input type="checkbox" ng-model="tag.aaa" ng-change="changed(tag.aaa,'aaa')"/>
<input type="checkbox" ng-model="tag.ccc" ng-change="changed(tag.ccc,'ccc')"/>
</div>
<div class="group">
<input type="checkbox" ng-model="tag.zzz" ng-change="changed(tag.zzz, 'zzz')"/>
</div>
Demo JSBIN
I'm trying to set up form validation using angular-ui. I want to check that the form is valid before submitting it, so I have set up a ng-submit event handler.
But before even implementing any validation, I noticed that the event handler gets called even when not submitting the form. In the example below, it gets invoked when I click the Add Item button:
<div ng-app="app">
<div ng-controller="ctrl">
<form name="myForm" ng-submit="sub()" novalidate>
<div ng-repeat="item in items">
<ng-form name="row">
<input type="text" name="value" ng-model="item.value" required />
</ng-form>
</div>
<button ng-click="addItem()">Add Item</button>
<input type="submit" value="Submit"/>
</form>
</div>
</div>
And JS:
var app = angular.module('app', ['ng']);
app.controller('ctrl', ['$scope', function($scope) {
$scope.items = [];
$scope.addItem = function() {
$scope.items.push({ value: $scope.items.length });
};
$scope.sub = function() {
alert("submitted?");
};
}]);
See my fiddle here:
http://jsfiddle.net/UvLBj/2/
Is this supposed to happen? Seems wrong to me that the ng-submit isn't just fired on form submit... Have I done something wrong?
Believe you need to add type="button" to avoid the accidental call to submit. Updated the fiddle and seems to fix it:
http://jsfiddle.net/UvLBj/3/
<button type="button" ng-click="doSomething()">Test</button>