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
Related
I have some input checkbox which is created inside ng-repeat
<li ng-repeat="item in tasks track by $index">
<input type="checkbox" ng-init="setChecked(item.status)"
ng-checked="changeStatus(item.id)"
ng-model="item.status" value="{{item.id}}">
<span ng-model="item.title" ng-keyup="completeEdit(item.id)"
contenteditable="false" ng-dblclick="contentEdit()"
class="done-{{item.status}}">{{ item.title }}
</span>
</li>
What I am trying to achieve is, based on a data item property the checkbox should show either checked or unchecked. For that I am using ng-init of the checkbox. Below is the function I am calling in ng-init
$scope.setChecked = function(status) {
event.target.checked = status;
};
But the problem is the above function is not making change to checkbox. The checkbox is always showing unchecked even if the status is true
Can anyone tell me what I am doing wrong in the above code?
Any help is appreciated :)
To make the checkbox checked or unchecked I should have used ng-checked and for update the status I used ng-change. This fixed the problem for me.
<input type="checkbox" ng-change="changeStatus(item.id)"
ng-checked="item.status" ng-model="item.status"
value="{{item.id}}">
I'm not sure what I'm doing wrong but I'd like the value of checkboxes to show up as an array in the stores property. Nothing ever shows up. I feel like I'm not utilizing the ng-model properly.
Controller
$scope.parameters = {
myMainOptions:
{
teams: ['angels', 'giants', 'orioles', 'bluejays', 'athletics']
}
}
View
<li ng-repeat="t in parameters.myMainOptions.teams">
<input ng-model="form.selectedTeams[t]" type="checkbox" /> {{t}}
</li>
<button class="btn btn-sm" type="submit" ng-click="submit(form)">SUBMIT</button>
you will need to initialize an array in scope to fill the data into it,,
and also you need to use $index to access the current index of each element ,, so that you can make it as an array not with the object is sel as key like here
<input ng-model="boxes[$index]" type="checkbox" />
you can see the js fiddle here
http://jsfiddle.net/vrem17m0/
There's nothing wrong in your code. Just make sure to initialize the form.selectedTeams object and set the angular controller correctly, then you should be good to go.
You can check this JsFiddle to see it working.
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"
I want to add two classes in angular. One is always the same and one is retrieved by the scope.
I attempted this:
<label class="checkbox" ng-switch-when="checkbox" ng-class="{{field.name}}">
<input
name="{{field.key}}"
type="checkbox"
value="Option 1"
ng-model="$storage[field.key]"
>
{{field.label}}
</label>
It generated two-class attributes in the DOM.
This:
<label ng-switch-when="checkbox" ng-class="{{field.name}} checkbox">
<input
name="{{field.key}}"
type="checkbox"
value="Option 1"
ng-model="$storage[field.key]"
>
{{field.label}}
</label>
didn't add anything to the class-attribute at all
I put together a simple example on plunker for you here (http://plnkr.co/edit/H7JstMuvHSlwPSy3raPO?p=preview). The core of the example is:
<div ng-class="{red: showRed, bold: showBold}">Hello Plunker!</div>
To make this example work, you need to define two booleans "showRed" and "showBold" in your controller. Its very simple but the controller code looks like:
var app = angular.module("App", []);
app.controller("ctrl", function($scope){
$scope.showRed = true;
$scope.showBold = true;
});
When you toggle these boolean values true/false, the classes will toggle on and off the element. In order to make this easy to see, I added two buttons to the example so you can toggle without changing code. Hope this helps you out. Best of luck!
ng-class expects an expression that evaluates to a string, an array or a map. Btw. You don't need {{ because the whole string already is an expression.
Your second expression cannot be evaluated. It's like a line in JavaScript field.name checkbox - that's not valid code. field.name + ' checkbox' would be. You could use that.
An array would definitely be easier to use if you had more dynamic classes:
[field.name, someOtherVariable, 'checkbox'].
So I am trying to bind radio buttons to objects. I have spent like an hour trying to figure this up and at last admit defeat. Here's what I got:
<table>
<tr ng-repeat="theCustomer in customers">
<td>
<input type="radio" ng-model="currentCustomer" value="theCustomer" id="{{theCustomer.id}}" ng-change="currentCustomer = theCustomer">
<label for="{{theCustomer.id}}">{{theCustomer.name}}</label>
</td>
</tr>
</table>
The angular stuff:
bankApp.controller("BankController", function ($scope, CustomerRepository)
{
$scope.customers = [];
$scope.currentCustomer = {};
$scope.createCustomer = function () {
CustomerRepository.save($scope.customer, function (customer) {
$scope.customers.push(customer);
$scope.customer = {};
});
};
});
Currently, when I try and click on a radio button nothing happens, it doesn't even get checked. I'm sure there's got to be a really simple solution to this. The end goal is to have currentCustomer hold the customer reflected in the radio selection.
<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">{{theCustomer.name}}</td>
The key here is the ng-value="theCustomer. This is how angular knows which object is selected. The html value only knows string values and cannot map to objects.
If you insert the above code, the radio will reflect the model, even if it is changed programatically. Also, you can't forget the $parent in the ng-model because the ng-repeat creates a new scope.
Apparently, getting a radio group to work inside an ng-repeat can be a bit tricky. The issue is with the ng-repeat creating its own child scope. One solution is to bind the model to the $parent. This thread gives an example.
I also created a working fiddle that more closely resembles your example.
In essence, I think your html is the only point that needs reworking:
<table>
<tr ng-repeat="theCustomer in customers">
<td><input type="radio" ng-model="$parent.currentCustomer" name="foo" value="{{theCustomer}}" id="{{theCustomer.id}}">{{theCustomer.name}}</td>
</tr>
</table>
It is because of the scope inheritance, you can read more about the problem here.
One solution that I use in such a case, is to bind the object to an object property instead of a primitive value like ng-model="form.currentCustomer".
Demo: Plunker