<input type="checkbox" name="chk" ng-model="Crate" ng-click="crate('sm',$event)">
on model cancel
$scope.cancelC = function() {
console.log($scope.Crate);
}
//it showing false but not unchecking the checkbox
You have to specify the ng-value. You can use just ng-value="true" or other values, as string value ng-value="'now-this-is-a-string-value'".
angular.module('test', []).controller('TestController', function() {
var vm = this;
this.title = 'Test';
this.value = true;
this.toggle = function() {
vm.value = !vm.value;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestController as test">
{{ test.title }}
<input type="checkbox" name="chk" ng-model="test.value" ng-value="true" />
<button ng-click="test.toggle('sm',$event)">Toggle</button>
</div>
</div>
Related
I am looking for a solution to this matter for the last 2 hours and I can't find a simple answer to resolve it.
I want to check if the checkbox is checked or not and whatever I do, the console always tell me it is unchecked.
HTML :
<ion-checkbox ng-model="option1" ng-true-value="2" ng-false-value="0" id="itemOrder-checkbox1">With option 1 (+$2)</ion-checkbox>
<ion-checkbox ng-model="option2" ng-true-value="3" ng-false-value="0" id="itemOrder-checkbox2">With option 2 (+$3)</ion-checkbox>
<ion-checkbox ng-model="option3" ng-true-value="1" ng-false-value="0" id="itemOrder-checkbox3">With option 3 (+$1)</ion-checkbox>
<label class="item item-input" id="itemOrder-input4">
<input id="notes" type="text" placeholder="Add some notes...">
</label>
<div class="spacer" style="width: 300px; height: 33px;"></div>
<button class="button button-block button-dark" style="color:#F5E124;" type="submit" id="itemOrder-button3" ng-click="addToCart()">
Add to cart (${{quantity * (15 + option1 + option2 + option3)}})
</button>
Controller :
$scope.addToCart = function(){
if ($scope.option1) {
console.log("CheckBox is checked.");
} else {
console.log("CheckBox is not checked.");
}
firebase.database().ref('accounts/' + userId + '/cart/').push({
item: "item1",
quantity: document.getElementById('quantity').value,
price: document.getElementById('price').textContent,
notes: document.getElementById('notes').value,
})
$state.go("menu2.menu");
}
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.CheckPassport = function () {
if ($scope.HasPassport) {
$window.alert("CheckBox is checked.");
} else {
$window.alert("CheckBox is not checked.");
}
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
Do you have Passport?
<label for="chkPassport">
<input id="chkPassport" type="checkbox" ng-model="HasPassport" />
</label>
<input type="button" value = "Check Passport" ng-click = "CheckPassport()" />
</div>
</body>
</html>
<input type="checkbox" checked ng-change="click()" ng-model="option1" value="Bike">
I have a bike
Controller:
$scope.click = function(){
if ($scope.option1) {
alert("CheckBox is checked.");
} else {
alert("CheckBox is not checked.");
}
}
Here is the demo: Plnkr
I have several checkboxes dynamicaly generated from array source:
/*js*/
$scope.arrondissements = JSON.parse('
[{"name":"4e","checked":false,"disable":true},
{"name":"5e","checked":false,"disable":false},
{"name":"11e","checked":false,"disable":false},
{"name":"12e","checked":false,"disable":false},
{"name":"13e","checked":false,"disable":false},
{"name":"14e","checked":false,"disable":false},
{"name":"15e","checked":false,"disable":false},
{"name":"16e","checked":false,"disable":false},
{"name":"17e","checked":false,"disable":false},
{"name":"18e","checked":false,"disable":false},
{"name":"19e","checked":false,"disable":false},
{"name":"20e","checked":false,"disable":false}]');
<!-- HTML -->
<div ng-repeat="item in arrondissements" class="checkbox-inline ">
<label>
<input type="checkbox" ng-disabled="{{item.disable == true}}"
value="{{item.checked}}" ng-model="item.checked" >
<span>{{item.name}}</span>
</label>
</div>
Checkboxes are generated correctly but When source gets updated , checkbox doesn't update
/*js*/
$scope.disableCb = function () {
$scope.arrondissements[5].disable = true;
$scope.arrondissements[6].disable = true;
$scope.arrondissements[7].disable = true;
}
<!-- HTML -->
<button ng-click="disableCb()">disable</button>
Could you tell me why and how to fix it?
I made a Plunker : http://plnkr.co/edit/jD1l3NgJuduTOoskpeVM
You should define your $scope.disableCb function inside your controller function.
function controller( $scope) {
var vm = $scope;
$scope.title = 'controller';
$scope.arrondissements = JSON.parse('[{"name":"4e","checked":true,"disable":true},{"name":"5e","checked":false,"disable":false},{"name":"11e","checked":false,"disable":false},{"name":"12e","checked":false,"disable":false},{"name":"13e","checked":false,"disable":false},{"name":"14e","checked":false,"disable":false},{"name":"15e","checked":false,"disable":false},{"name":"16e","checked":false,"disable":false},{"name":"17e","checked":false,"disable":false},{"name":"18e","checked":false,"disable":false},{"name":"19e","checked":false,"disable":false},{"name":"20e","checked":false,"disable":false}]');
$scope.disableCb = function () {
$scope.arrondissements[5].disable = true;
$scope.arrondissements[6].disable = true;
$scope.arrondissements[7].disable = true;
}
}
I've also fixed how you used your directives. I've removed the value attribute on the checkboxes since they're redundant with ng-model.
I've fixed your usage of ng-disabled as well
<div ng-repeat="item in arrondissements" class="checkbox-inline ">
<label>
<input type="checkbox" ng-disabled="item.disable"
ng-model="item.checked" >
<span>{{item.name}}</span>
</label>
</div>
<button ng-click="disableCb()">disable</button>
see my fork on your plunker: http://plnkr.co/edit/v1fwlf7QH0189WAhv6qM?p=preview
I have 2 radio buttons, then is ng-change event is applied on NO radio button.
I am showing a confirmation box , on ng-change event of NO radio button.
if he click cancel, Then I want to check the Yes Radio button.
But it's not working .
HTML
<body ng-app="myapp" ng-controller="MyCtrl">
<div>
Yes:
<input type="radio" ng-model="ModelVal" value="true" name="ff">
<br>No:
<input type="radio" ng-model="ModelVal" value="false" ng-change="chck('ModelVal')" name="ff">
<br>
<hr>{{ModelVal}}
<div ng-if="ModelVal == 'true'">Helll</div>
</div>
</body>
JS
// Code goes here
var myapp=angular.module('myapp',[]);
myapp.controller('MyCtrl',function($scope){
$scope.ModelVal='true';
$scope.chck=function(chkM){
var getV=confirm('Sure to Cancel ?');
if(getV) {
$scope[chkM]='false';
}else {
$scope[chkM]='true';
}
};
});
as you can see from demo, after clicking on NO radio button, I'm not changing model, unless he click on OK or cancel.
PLUNKER
Using a $timeout() seems to have solved the problem
// Code goes here
var myapp = angular.module('myapp', []);
myapp.controller('MyCtrl', function ($scope, $timeout) {
$scope.ModelVal = 'true';
$scope.chck = function (chkM) {
var getV = confirm('Sure to Cancel ?');
$timeout(function () {
$scope[chkM] = getV ? 'false': 'true';
})
}
});
// Code goes here
var myapp = angular.module('myapp', []);
myapp.controller('MyCtrl', function($scope, $timeout) {
$scope.ModelVal = 'true';
$scope.chck = function(chkM) {
var getV = confirm('Sure to Cancel ?');
$timeout(function() {
$scope[chkM] = getV ? 'false' : 'true';
})
}
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<div ng-app="myapp" ng-controller="MyCtrl">
<div>
Yes:
<input type="radio" ng-model="ModelVal" value="true" name="ff">
<br>No:
<input type="radio" ng-model="ModelVal" value="false" ng-change="chck('ModelVal')" name="ff">
<br>
<hr>{{ModelVal}}
<div ng-if="ModelVal == 'true'">Helll</div>
</div>
</div>
Hello everyone i have faced some problem in case of nested checkbox uses. In my problem i m stuck on to how to use IncludeAll on click checkbox. If checkbox value is true then it's give me a value of that. if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array. and if one of the checkbox is false then IncludeAll checkbox false..But in Case the other checkbox will be selected.
This is my Fiddle Link : http://jsfiddle.net/0x4396pu/1/
Here is my Html Code:
<form action="#" ng-controller='MyCtrl'>
<div class="control-group" ng-repeat="story in stories">
<br>
<input type="checkbox" ng-model="story.selectionAll">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-checked="story.selectionAll">
{{browser}}
</label>
</div>
</div>
</div>
<pre>{{selection | json }}</pre>
</form>
Here is my Controller file :
function MyCtrl($scope) {
$scope.stories = ['1', '2', '3'];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
angular.forEach($scope.stories, function(story) {
$scope.selection[story] = {
browsers: {},
};
});
}
Thanks in Advance.
I am answer my own Question. But anyway Here is Answer how to select Checkbox in Nested ng-repeat.i think It's Help you Thanks.
Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview
Here is Html Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<body>
<form action="#" ng-controller='detailContrller'>
<div class="control-group" ng-repeat="story in stories"> <br>
<h4> Enter Data </h4>
Name : <input type="text" data-ng-model="selection[story].Name1"
placeholder="Enter Name"> <br>
Address : <input type="text" data-ng-model="selection[story].Name2"
placeholder="Enter Address"> <br>
City : <input type="text" data-ng-model="selection[story].Name3"
placeholder="Enter City"> <br>
Phone : <input type="text" data-ng-model="selection[story].Name4"
placeholder="Enter Phone "> <br>
State : <input type="text" data-ng-model="selection[story].Name5"
placeholder="Enter State"> <br>
<input type="checkbox" ng-model="selection[story].all"
ng-change="updateAll(story)">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-change="checkChange(browser)"
> {{browser}}
</label>
</div>
</div>
<button type="button" data-ng-click="save()">Save</button>
<pre>{{selection | json}}</pre>
</form>
</body>
</html>
Here is my Controller
var app = angular.module("myApp",[]);
app.controller('detailContrller', function($scope){
$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};
var checked;
$scope.updateAll = function (story) {
checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
for(var i = 0; i< 3; i++) {
$scope.stories.push(i+1);
}
$scope.checkChange = function (browser) {
for(var i =0; i< $scope.stories.length; i++){
if(!$scope.stories[i].selected){
checked = false
return false;
}
}
}
angular.forEach($scope.stories, function(storgy) {
$scope.selection[storgy] = {
browsers: {}
};
});
$scope.save = function () {
console.log($scope.selection);
}
})
Your "include all" checkbox is trying to set .selectionAll property on a String (story in stories gives you a String).
You can't use ng-checked to somehow "work together" with ng-model. If you want your "include all" checkbox to select all subordinate checkboxes and vice versa, you'll need to watch the changes and provide some logic connecting the two things in your controller.
For example, if you want change of the "include all" checkbox value to influence other checkboxes, you'd have to do something like
<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">
and in your controller
$scope.updateAll = function (story) {
var checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
and handle changes of the individual checkboxes in a similar fashion.
Have a drill down form field with fields progressively appearing. While I've figured out the logic for making them appear one-at-a-time down the page, including a simple toggle, the issue is resetting all observables to their original state when "No" is clicked (and with all fields clearing). Currently if "Yes" is clicked a second time (after completing the form, then deciding "No") all the fields reappear at once instead of progressively. http://jsfiddle.net/hotdiggity/JJ6f6/
Knockout model:
var ViewModel = function () {
var self = this;
self.showField1 = ko.observable(true);
self.showField2 = ko.observable(false);
self.showField3 = ko.observable(false);
self.showField4 = ko.observable(false);
self.yesOrNo = ko.observable("");
self.hasValue = ko.observable("");
self.toggleCalc = ko.observable("");
self.showField2 = ko.computed(function () {
return self.yesOrNo() == 'yes';
});
self.showField3 = ko.computed(function () {
self.showField4(false);
return ( !! self.hasValue());
});
self.toggleCalc = function () {
self.showField4(!self.showField4());
};
};
ko.bindingHandlers.fadeVisible = {
init: function (element, valueAccessor) {
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value));
},
update: function (element, valueAccessor) {
var value = valueAccessor();
ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
}
};
ko.applyBindings(new ViewModel());
HTML:
<div class='list-inputs'>
<h2>Drilldown toggle interaction</h2>
<!--LEVEL 1-->
<div data-bind='fadeVisible: showField1'>(L1) Choose one to display more options:
<p>
<label>
<input type='radio' name="type" value='yes' data-bind='checked: yesOrNo' />Yes</label>
<label>
<input type='radio' name="type" value='no' data-bind='checked: yesOrNo' />No</label>
</p>
<!--LEVEL 2-->
<div data-bind='fadeVisible: showField2'>
<p>(L2) Enter input and click off:
<input type="text" data-bind='value: hasValue' />
</p>
<!--LEVEL 3-->
<div data-bind='fadeVisible: showField3'>
<p><span>(L3) Earnings:</span>
<input type="text" /> <a data-bind="click: toggleCalc" href="#">Toggle calculator</a>
</p>
<!--LEVEL 4-->
<div data-bind='fadeVisible: showField4'>
<br />
<p><b>(L4) Calculator</b>
</p>
<p><span>Input 1:</span>
<input type="text" />
</p>
<p><span>Input 2:</span>
<input type="text" />
</p>
<p><span><b>Total:</b></span>
<input type="text" />
</p>
</div>
</div>
</div>
</div>
</div>
I got this working (I think the way you want) by making two changes:
I initialized the yesOrNo field to "no".
Changed showField2 to clear out the value of the "L2" textbox whenever the user changes their L1 response to "No". This causes the form to "re-initialize" so the next time they select yes, it will start clean.
self.showField2 = ko.computed(function () {
var isNo = self.yesOrNo() == 'no';
if( isNo )
{
self.hasValue('');
}
return !isNo;
});