Problem: we have a group of check-boxes.i want only one checked at a time(like as radio button).
I am doing like this.
In View
<div>
<input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
<div ng-if="first">
<label>Hi</label>
</div>
<input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
<div ng-if="second">
<label>Adem</label>
</div>
</div>
In Controller
function controller(){
$scope.checkOne=function(val){
if(val == '1'){
$scope.first=true;
$scope.second=false;
}
if(val == '2'){
$scope.second=true;
$scope.first=false;
}
}
}
But it is not working.it selects both the check-boxes.
Please suggest me a solution.
Thanks.
Try this:
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="controller">
<input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
<div ng-if="first">
<label>Hi</label>
</div>
<input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
<div ng-if="second">
<label>Adem</label>
</div>
</div>
</body>
</html>
script.js
function controller($scope) {
$scope.checkOne=function(val){
if(val == '1'){
$scope.first=true;
$scope.second=false;
}
if(val == '2'){
$scope.second=true;
$scope.first=false;
}
}
}
http://plnkr.co/edit/WEn4CBXA3RvtZ33VuPyM?p=preview
You need to use ng-checked.
I also set any checked checkboxes to be disabled so that they can't be unchecked.
After that, a simple function with a switch statement to toggle all of them on ng-click.
Controller:
$scope.firstCheck = true;
$scope.checkToggle = function(checkbox) {
switch (checkbox) {
case 'first':
$scope.firstCheck = true;
$scope.secondCheck = false;
$scope.thirdCheck = false;
break;
case 'second':
$scope.firstCheck = false;
$scope.secondCheck = true;
$scope.thirdCheck = false;
break;
case 'third':
$scope.firstCheck = false;
$scope.secondCheck = false;
$scope.thirdCheck = true;
break;
}
}
HTML:
<div>
<input type="checkbox" ng-disabled="firstCheck" ng-click="checkToggle('first')" ng-model="first" ng-checked="firstCheck" />
<div ng-if="first">
<label>Hi</label>
</div>
<br/><input type="checkbox" ng-disabled="secondCheck" ng-click="checkToggle('second')" ng-model="second" ng-checked="secondCheck" />
<div ng-if="second">
<label>Adem</label>
</div>
<br/><input type="checkbox" ng-disabled="thirdCheck" ng-click="checkToggle('third')" ng-model="third" ng-checked="thirdCheck" />
<div ng-if="third">
<label>something else</label>
</div>
Checkbox Treat as RadioButton : Here We have four checkbox, and all should be work as RadioButton. Checkbox with ng-change is use for change value of ng-model.
http://plnkr.co/edit/yTJUZcFoLsSEBjruRuEY?p=preview
App.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.first = false;
$scope.second = false;
$scope.third = false;
$scope.fourth = false;
});
HTML
<div>{{first}}|{{second}}|{{third}}|{{fourth}}
<br/>
<input type="checkbox" ng-model="first" ng-change="second=false;third = false;fourth = false;" />
<input type="checkbox" ng-model="second" ng-change="first = false;third = false;fourth = false;" />
<input type="checkbox" ng-model="third" ng-change="first =false;second = false;fourth = false;" />
<input type="checkbox" ng-model="fourth" ng-change="first = false;second = false;third = false;" />
</div>
Related
In AngularJs Tutorial I have built a simple Calculator but when I click on calculate button it does not show the output. I am not sure where I am doing the mistake. The HTML file has three text input fields and five buttons. When I click on calculate button the output doesn't appear
My HTML file code
<!DOCTYPE html>
<html data-ng-app="calc">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div align="center" data-ng-controller="CalcCtrl as c1">
<input type="text" data-ng-model="c1.num1"></input>
<span data-ng-bind="c1.selectedOperation"></span>
<input type="text" data-ng-model="c1.num2"></input>
<span></span>
<input type="text">{{c1.result}}</input>
<p>
<button data-ng-click="c1.buttonClicked('+')">+</button>
<button data-ng-click="c1.buttonClicked('-')">-</button>
<button data-ng-click="c1.buttonClicked('*')">*</button>
<button data-ng-click="c1.buttonClicked('/')">/</button>
</p>
<p>
<button data-ng-click="c1.calcResult()">calculate</button>
</p>
{{c1.num1}} {{c1.num2}}
</div>
</body>
</html>
My App.JS file
var app = angular.module("calc", []);
app.controller('CalcCtrl', calc);
function calc() {
this.result = 0;
this.buttonClicked = function(button){
this.selectedOperation=button;
}
this.calcResult=function(){
var1 n1=parseFloat(this.num1);
var2 n2=parseFloat(this.num2);
if(this.selectedOperation==='+') {
this.result = n1+n2;
}else if(this.selectedOperation==='-') {
this.result = n1-n2;
}else if(this.selectedOperation==='*') {
this.result = n1*n2;
}else if(this.selectedOperation==='\') {
this.result = n1/n2;
}
}
}
I don't know what are the changes I did from your code, because I have changed more code and added some features. You can just copy paste this below snippet.
Working Snippet
angular.module("calc",[]).controller('CalcCtrl', function($scope) {
$scope.result = 0;
$scope.buttonClicked = function(button){
this.selectedOperation=button;
};
$scope.calcResult = function(){
var n1 = parseFloat($scope.num1);
var n2 = parseFloat($scope.num2);
if($scope.selectedOperation==='+') {
$scope.result = n1+n2;
}else if($scope.selectedOperation==='-') {
$scope.result = n1-n2;
}else if($scope.selectedOperation==='*') {
$scope.result = n1*n2;
}else if($scope.selectedOperation==='/') {
$scope.result = n1/n2;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="calc" align="center" ng-controller="CalcCtrl">
<input type="text" ng-change="calcResult()" ng-model="num1"></input>
<span ng-bind="selectedOperation"></span>
<input type="text" ng-change="calcResult()" ng-model="num2"></input>
<span></span>
<input type="text" ng-model="result"></input>
<p>
<button ng-click="buttonClicked('+');calcResult()">+</button>
<button ng-click="buttonClicked('-');calcResult()">-</button>
<button ng-click="buttonClicked('*');calcResult()">*</button>
<button ng-click="buttonClicked('/');calcResult()">/</button>
</p>
<p>
<button ng-click="calcResult()">calculate</button>
</p>
{{num1}}{{selectedOperation}} {{num2}} = {{result}}
</div>
else if(this.selectedOperation==='\') must be else if(this.selectedOperation==='/'). You are escaping the second quotation mark.
At first the input tag is a standalone tag and has no value inside. Try to use data-ng-model instead or set the value to a span.
<input type="text" data-ng-model="c1.result" />
or
<span>{{c1.result}}</span>
Then have a look at the browser console if there are any errors reported.
Initially the value of button is disable because value of button is true so the button is disabled.After selecting the checkbox now the button should be able to click. But it is not able to click :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a = function(x) {
console.log(x);
a = [1, 2, 3];
console.log(a);
}
});
</script>
</body>
</html>
Your ng-disabled always checks for length. But you actually need to check the boolean value of your checkbox to satisfy the scenario you are trying to achieve.
I have updated your code to the code below
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='formData.week[0]==false &&
formData.week[1]==false &&
formData.week[2]==false &&
formData.week[3]==false &&
formData.week[4]==false
' ng-click=a(formData)>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formData = {}
$scope.formData.week = []
$scope.formData.week[0]=false;
$scope.formData.week[1]=false;
$scope.formData.week[2]=false;
$scope.formData.week[3]=false;
$scope.formData.week[4]=false;
});
</script>
</body>
</html>
change ng-disabled='!formData.week.length'
to
ng-disabled='!(!!formData.week[0] || !!formData.week[1] || !!formData.week[2] || !!formData.week[3] || !!formData.week[4])'
check out the working example : https://plnkr.co/edit/JOARO1NwgunCw5Zcyvpo?p=preview
Actually there is something to understand
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
</div>
So when you are applied NgModel as formData.week[0] so it will form the scope variable formData something like that
{
"week" :{"0":true,"1" : true", "2" : "false"
}
as you have not declared formData.week as an array. So for this object to be checked on length you need to make a function like
<input type="submit" ng-disabled='!checkLength()' ng-click=a(formData)>
the function will look like
$scope.checkLength = function(){
if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0)
return true;
else
return false;
}
Moreover if you want the button enabled only when any of the checkboxes is true. then you may modify the function
$scope.checkLength = function(){
if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0) {
var point = 0;
for(var i=0;i< Object.keys($scope.formData.week).length;i++){
if($scope.formData.week[i] == true){
point++;
break;
}
}
if(point>0) return true;
else return false;
}
else
return false;
}
I have a text box that show when I click on checkbox and I need to make an event on it that can make me bind it to object from DB
HTML:
<div ng-repeat="feture in featureEnumArray">
<input id="txtchkFet" type="checkbox" ng-model="feture.IsChecked" />
{{feture.DisplayText}}
<div ng-show="feture.IsChecked" >
<input class="form-control" type="text" ng-model="feture.Value" ng-change="getFeatureID(feture)" id="txtValue" placeholder="Type Feature Value" />
</div>
<div class="label label-danger" ng-show="feture.IsChecked && !feture.Value">
Type Value
</div>
</div>
And in Angular controller I did Like this :
$scope.getFeatureID = function (feture) {
if (feture.IsChecked) {
$scope.Planfeature = angular.copy(feture);
$scope.PlanFeatureTemp.FeatureID = $scope.Planfeature.ID;
$scope.PlanFeatureTemp.Value = $scope.Planfeature.Value;
$scope.Planfeature = [];
}
else {
var index = $scope.JAdminPlan.PlanFeatureValues.indexOf(feture);
$scope.JAdminPlan.PlanFeatureValues.splice(index, 1);
}
if (!$scope.$$phase) $scope.$apply();
};
I got two elements paragraph and input tag. When i click the paragraph, the input should show and paragraph should hide. when the input is blurred the input should hide and paragraph should show.
I tried this but not working
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" ng-blur="edit = false">
<input type=text name="email" ng-blur="blurUpdate()" />
</div>
Move ng-blur to input please see demo below
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope, $timeout) {
$scope.showEditor = function() {
$scope.edit = true;
var textbox = document.getElementById("input_email");
var tmp = $scope.text
$scope.text = ""
$timeout(function() {
textbox.focus();
$scope.text = tmp;
});
}
$scope.blurUpdate = function() {
// add this line
$scope.edit = false;
//your code
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl" ng-init="text='some text'">
<p ng-click="showEditor()" ng-show="!edit">{{text}}</p>
<div ng-show="edit">
<input type=text name="email" ng-blur="blurUpdate()" ng-model="text" id="input_email" />
</div>
</div>
</div>
the ngBlur is compatible with input tag, that is why it is not working:
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" >
<input type=text ng-blur="edit = false" name="email" />
</div>
http://jsfiddle.net/xgp2qsww/1/
Trying to clear 2 check boxes when another is clicked. I've searched for this answer and have tried using information from the examples but for some reason nothing I try works. Here is the code I am currently using.
function control()
{
/*var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');*/
if(document.forms[0].one.checked == true)
{
document.forms[0].two.checked == false;
document.forms[0].three.checked == false;
}
if(document.forms[0].two.checked == true)
{
document.forms[0].three.checked == false;
document.forms[0].one.checked == false;
}
if(document.forms[0].three.checked == true)
{
document.forms[0].one.checked == false;
docuemnt.forms[0].two.checked == false;
}
}
</SCRIPT>
</head>
<body>
<form action="" method="POST" name="getArea">
<input type="checkbox" onClick="control()" name="one">Standard Shipping<br />
<input type="checkbox" onClick="control()" name="two">Overnight Shipping<br />
<input type="checkbox" onClick="control()" name="three">Priority Shipping<br />
</form>
</body>
</html>
Are you trying something like below?
<html>
<head>
<script type="text/javascript">
function control(idSelected)
{
/*var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');*/
if(idSelected==1)
{
document.forms[0].two.checked = false;
document.forms[0].three.checked = false;
}
if(idSelected==2)
{
document.forms[0].three.checked = false;
document.forms[0].one.checked = false;
}
if(idSelected==3)
{
document.forms[0].one.checked = false;
docuemnt.forms[0].two.checked = false;
}
}
</SCRIPT>
</head>
<body>
<form action="" method="POST" name="getArea">
<input type="checkbox" onClick="control(1)" name="one">Standard Shipping<br />
<input type="checkbox" onClick="control(2)" name="two">Overnight Shipping<br />
<input type="checkbox" onClick="control(3)" name="three">Priority Shipping<br />
</form>
</body>
</html>