I have a list of check boxes...
<div class="checkBoxGroup" ng-repeat="service in getAdditionalServices()">
<input ng-click="additionalServiceClick($index)" type="checkbox" value="{{service.text}}"><span class="fieldTitle">{{service.text}}</span>
</div>
Event handler...
$scope.additionalServiceClick = function ($index) {
};
In the 'additionalServiceClick' function I want to update an array of checked services. But angular unselects any attempt to check a check box if an ng-click handler is assigned.
How to get Angular to bog off in this instance?
Related
I'm trying to implement validation for a form using Angular 1.1.1 and Ionic.
There are many "wallets" and the user needs to send a new "value" to each of the wallet. There's also a specified previous value of the wallet. The validation should check if all the input field are filled out and if the new value is bigger than previous.
My form (index.html):
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl">
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{item.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
</div>
<button class="button" type="submit">Submit</button>
</form>
It results in always showing "!!!" error for empty input even if the user haven't already submitted the form. I tried to use $scope.myForm.submitted=true; in the controller but the problem is it reaches the controller only if all the fields are filled out.
My controller (values.js):
'Use Strict';
angular.module('App')
.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
$scope.sendValues = function(wallets){
debugger;
...
})
Can anyone help me to figure out why I can't see the debugger window if not all the fields are with info?
Can you suggest how to make a custom validation? (new value should be bigger than previous)
It results in always showing "!!!" error for empty input even if the user haven't already submitted the form?
Your ng-show should be
ng-show="myForm.$submitted==true && myForm.wallet_{{item.id}}.$error.required"
and form should be have novalidate attribute if you want custom validation
<form name="myForm" ng-submit="sendValues(wallets)" novalidate>
otherwise it will do default html validation
I tried to use $scope.myForm.submitted=true; in the controller but the problem is it reaches the controller only if all the fields are filled out
Its because ng-submit will validate for true condition($valid==true) for every form control element .
If it is filled and valid data then only form $valid flag is set to true otherwise not.In case $valid==true,you will able to submit the form and function in controller get fired
you can use
<input type="submit" ng-click="sendValues(wallets)" value="Save" />
if you want to submit the form without validation and want to do validation in controller
You can read more from angular#form
I have HTML code is generated by Angular JS via ng-repeat:
<li ng-repeat="(key, item) in data.conditions_list" ng-class="{active: item.active}">
<span class="sbrand-checkbox">
<input ng-checked="item.active" type="checkbox" ng-model="formData.conditions[item.id]">
</span>
<label>{{item.name}}</label>
</li>
This code sets checkboxes on active state if ng-checked="item.active". It works.
When I checked any unchecked element and submit with checked by default form I see:
["conditions"]=>
array(1) {
[5]=>
string(4) "true"
}
So, it means is sent only thta checkbox which I have cheked. Others was not sent on server.
I can do something like as:
HTML:
<input ng-checked="isChecked(item.active, item.id)" type="checkbox" ng-model="formData.conditions[item.id]">
Angular JS:
$scope.isChecked = function (item, id){
if(item.active){
$scope.formData.conditions[id];
}
};
And after send form with $scope.formData.conditions
This is how the browser behaves. It do not submits the unchecked checkbox value. It has nothing to do with angularJs or Javascript.
You can treat the absence of checkbox value in the request as unchecked on the server.
An alternative way is to maintain hidden fields for each checkbox and set its value on checkbox change and submit these hidden fields to the server instead of checkboxes.
I love angular but when it comes to checkboxes and radio boxes they stink. I would resort to jquery. Insert the dom element that contains the inputs, and you will get back an array of values:
function getChecked(dom) {
var boxes = $(dom).find('input[type="checkbox"]').map(function()
{
return $(this).prop("checked")
}
);
return boxes;
}
I want to programmatically uncheck a checkbox. I know how to it in javascript but since I'm using angular, i think it's different.
Here's the link of jsfiddle : https://jsfiddle.net/TKVH6/499/
This is the first time I used jsfiddle so please let me know if you cant see the script and html.
This is the html
<input type="checkbox" ng-model="v" ng-click="checkAll()" />
<button ng-click="x()">eto</button>
This is the angular
$scope.x = function () {
$scope.v.checked=false;
};
I know there are lots of question like this, I've already tried those but I can't make it work.
Thanks!
<input type="checkbox" ng-checked="v" ng-click="checkAll()" />
In your controller
$scope.v = true; // or false
First thing : You have specified controller on ul and bind click event of button outside the ul so moved ng-controller on div.
Second thing: In order to check it pragmatically you need to set $scope.Items[i].Selected = true;
$scope.x = function () {
alert("x");
$scope.Items[0].Selected=true;
};
Why we need to set Selected property of Items[i] while I have not declared?
The reason behind that is your html binding is something like this:
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
Here every item is element from Items array that means your checkbox checked value is now bind to selected property of that object. Even though you have not defined that property in Items collection angular will create it and will bind it to that property. So you are required to set that property. I hope it would help you.
Here is working fiddle => link
Hey guyz i am having issue related to checkboxes in html, i am using angularjs.
Whenever i checked one checkbox other checkbox getting selected and vice-versa.
Here's my Html code.
<form ng-show='MyForm'>
<div ng-controller="MyController">
<div name="sampleName" ng-repeat="sample in list" >
<input ng-model="q.sample" type="checkbox" >{{sample.name}}</label>
</div>
</div>
<button ng-click="submitForm()" >Submit</button>
<button ng-click="cancelForm()">Cancel</button>
</form>
But instead of using scope variable name 'q.sample', if i use only $scope.sample then it is working fine.
Still there is another issue with this too, On submitting data my form gets closed, but when i open it again, it shows me fresh form, there is no checked field, but if i cancel the form instead of submitting it with checked values and again opened it , i dont want the checked values to be present but i am getting the checked values instead of fresh form.
I tried to make values false in checkbox field on cancel button . See my Code of cancelForm()
$scope.cancelForm = function() {
$scope.MyForm = false
$scope.q.sample = false
}
So Basically, i have two questions, one is why i am getting all checkboxes selected on selected only one checkbox when i am using
$scope.q.sample
Second when i am using only
$scope.sample
scope value of sample is not reflecting on UI though it is reflecting in JS, i am getting the checked checkboxes.
It is because you are binding ng-model to the same controller property with this:
ng-model="q.sample"
Instead, if you want to select each individually then you need to have a different ng-model for each checkbox.
At the moment, you are changing q.sample and this, then, binds the value of q.sample to all the other checkboxes that define ng-model="q.sample".
Try something like this instead:
<div name="sampleName" ng-repeat="item in list" >
<input ng-model="item.checked" type="checkbox" >{{sample.name}}</label>
</div>
and then in cancelForm():
$scope.cancelForm = function() {
$scope.MyForm = false
angular.forEach($scope.list, function(item) {
item.checked = false;
});
}
Indeed as David Tryon mentioned, you are assigning the same ng-model to all the checkboxes and what you want is a different ng-model for each checkbox.
You can solve this by assigning a javascript expression to ng-model
for example:
ng-model="list[$index].checked"
Why does angular and the checkbox model not bind to the checked="checked". The checkbox is unset once angular loads.
eg: http://jsfiddle.net/5CZ74/2/
<div ng-app>
<form>
<input type="checkbox" ng-model="redirect" checked="checked">
<input type="text" ng-disabled="redirect==false">
</form>
</div>
When my form loads I am setting it enabled or disabled on the server as per server entity. How do I get the angular model to correctly bind to this value to enable or disable the input text field.
Thanks.
You have not defined redirect in your model anywhere, so it is undefined, and thus falsy. This is why the the checkbox is not checked. If you want it checked you need to add redirect to your model and set it to true. You need to have a controller and do this:
$scope.redirect = true;
See http://jsfiddle.net/5CZ74/3/