I have two different div which containing check box
first div
<div>
<input type="checkbox" ng-true-value="1" ng-model="req_doc"> one
<input type="checkbox" ng-true-value="2" ng-model="req_doc"> two
<input type="checkbox" ng-true-value="3" ng-model="req_doc"> three
</div>
second div
<div>
<input type="checkbox" ng-true-value="1" ng-model="pen_doc"> one
<input type="checkbox" ng-true-value="2" ng-model="pen_doc"> two
<input type="checkbox" ng-true-value="3" ng-model="pen_doc"> three
</div>
I want when i click on first div's check box if it selected in second div's check box then automatically unchecked it from second div's check box.
try by giving the same Name or ID to all the checkboxes examples:
<div>
<input type="chckbox" ng-true-value="1" ng-model="pen_doc" name="chk1"> one
<input type="chckbox" ng-true-value="2" ng-model="pen_doc" name="chk1"> two
</div>
so that you can select one checkbox at a time.
<input type="checkbox"> should be used alone, bound to its specific model variable. If you want multiple "checkboxes" indicating the set of non-overlapping values of a single variable, use <input type="radio">:
<input type="radio" ng-model="pen_doc" value="1">
<input type="radio" ng-model="pen_doc" value="2">
<input type="radio" ng-model="pen_doc" value="3">
As far as your original question goes, you could just do something like this in your controller:
$scope.$watch('req_doc', function (value) {
if ($scope.pen_doc == value) { // change to `===` if your values are correctly typed
$scope.pen_doc = 0;
}
});
are looking this type
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.value1 = true;
$scope.value2 = 'YES'
}
]);
</script>
<form name="myForm" ng-controller="ExampleController">
<div>
<input type="checkbox" ng-true-value="1" ng-model="req_doc">one
<input type="checkbox" ng-true-value="2" ng-model="req_doc">two
<input type="checkbox" ng-true-value="3" ng-model="req_doc">three
</div>
<div>
<input type="checkbox" ng-true-value="1" ng-checked="!req_doc">one
<input type="checkbox" ng-true-value="2" ng-checked="!req_doc">two
<input type="checkbox" ng-true-value="3" ng-checked="!req_doc">three
</div>
</form>
</body>
</html>
Related
I have a case where I use a form with AngularJS. I have radio buttons and the last option is always text input. All of them are connected with the same model so what ever user chooses with radio buttons or type in text input is saved in model.
The problem is with text input. When a user clicks the radio button, its value is shown on the last text input line. How do I stop that and still keep it connected to the same ng-model?
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
...
<div class="mtl-20">
Please write in: <input class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.religion" >
</div>
You can try a different approach like this:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.$ctrl = {};
$scope.$ctrl.diversityTest = {};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
...
<div class="mtl-20">
Please write in: <input ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp" class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.temp" >
</div>
<br>
This is religion model value : {{$ctrl.diversityTest.religion}}
</div>
How about this for a solution? Basically, have the radio buttons. Create an 'Other' with a text box, and only allow it to be selected if you enter a value for other. The text model is different, but when it's filled, will allow you to select 'Other' which will take on the value of what is in the textbox, and pass it to the model you care about.
<label class="form-check-label">
<input class="form-check-input" type="radio" name="religion" value="{{ textValue }}"
ng-disabled="!textValue && !(textValue.length > 5)"
ng-model="diversityTest.religion">
Other
<input class="input-material" type="text" name="religion" ng-model="textValue">
</label>
http://plnkr.co/edit/f9lzNLhZuy0c7BI2kE2A?p=preview
Adding ng-model to a radio button set seems to alter which input gets focused when tabbing. Tested with IE11 (11.842.10586.0), and Angular 1.6.3 (though it occurs in earlier versions of Angular as well).
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" value="1" name="radioExample" checked>
<input type="radio" value="2" name="radioExample">
<input type="radio" value="3" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = "1";
});
</script>
</body>
</html>
http://plnkr.co/edit/nwo7sljK4NIEr66T6q7w
This shows the normal behavior. If a radio button is selected, tabbing to the radio button group focuses on the selected radio button. If no radio button selected, tabbing forward focuses on the first element, tabbing back focuses on the last one.
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" value="1" ng-model="radioValue" name="radioExample">
<input type="radio" value="2" ng-model="radioValue" name="radioExample">
<input type="radio" value="3" ng-model="radioValue" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = "1";
});
</script>
</body>
</html>
http://plnkr.co/edit/vMlG7RUg2Kd0sZLmr0lb
This shows the modified behavior when ng-model is added. Regardless of whether a radio button is selected or not, tabbing forward focuses on the first element, tabbing back focuses on the last one. This behavior persists even after a different radio button is selected manually.
I've tried using various combinations of checked/ng-checked, delaying model initialization with $timeout, and using <fieldset>.
What is causing this and more importantly is there a way I can make the second scenario behave like the first one (focusing on the selected radio button when tabbing)?
I forked your "modified behavior" example on plnkr and added the checked attribute to the first radio button. Tabbing then behaves exactly as it does in your "normal behavior" example.
<input type="radio" value="1" ng-model="radioValue" name="radioExample" checked>
<input type="radio" value="2" ng-model="radioValue" name="radioExample">
<input type="radio" value="3" ng-model="radioValue" name="radioExample">
http://plnkr.co/edit/gbZFgKJbJyEBdgB9jXho?p=preview
To reconcile any differences between the model and the 'checked' attribute you could add/remove the attribute when the model value changes.
Try with ng-value. $scope.radioValue = "1"; data type is string change to $scope.radioValue = 1;
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "";
$scope.radioValue = 1;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input type="text" ng-model="firstname">
<br/>
<input type="radio" data-ng-model="radioValue" data-ng-value="1" name="radioExample">
<input type="radio" data-ng-model="radioValue" data-ng-value="2" name="radioExample">
<input type="radio" data-ng-model="radioValue" data-ng-value="3" name="radioExample">
<br/>
<input type="text" ng-model="firstname">
</form>
</div>
</body>
I have a form using AngularJS (classic one) that should display or not a CompanyName field only if the User is a Company.
By default the "Individual" radio should be selected:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app>
<h4>You are:</h4>
Name <input ng-model="user.name">
<h5>Individual or Company?</h5>
<input type="radio" name="type" id="company" ng-model="user.isCompany" ng-value=true> a company = '{{user.isCompany}}'<br>
<input type="radio" name="type" id="individ" checked > an individual<br>
<div ng-show="user.isCompany">
Company Name <input ng-model="user.companyName">
</div>
</body>
How to bind to the radio checked value in order to make it work?
I added a ng-model and ng-value to both inputs, so when you will click again on "an individual", the company form will disapear.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app ng-init="user.isCompany = false">
<h4>You are:</h4>
Name <input ng-model="user.name">
<h5>Individual or Company?</h5>
<input type="radio" name="type" ng-model="user.isCompany" ng-value="true"> a company = '{{user.isCompany}}'<br>
<input type="radio" name="type" ng-model="user.isCompany" ng-value="false"> an individual<br>
<div ng-show="user.isCompany">
Company Name <input ng-model="user.companyName">
</div>
</body>
Note that I added ng-init="user.isCompany = false" in <body>. You can also move it to your controller to make it cleaner:
$scope.user = { ..., 'isCompany': false };
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app>
<h4>You are:</h4>
Name <input ng-model="user.name">
<h5>Individual or Company?</h5>
<input type="radio" name="type" id="company" ng-model="user.isCompany" ng-value="true"> a company = '{{user.isCompany}}'<br>
<input type="radio" name="type" id="individ" ng-init="user.isCompany=false" ng-model="user.isCompany" checked ng-value="false"> an individual<br>
<div ng-show="user.isCompany">
Company Name <input ng-model="user.companyName">
</div>
</body>
I've been studying angular for three days now, and I came across a little challenge but I'm still clueless how to do solve it with Angular.js, I've searched for it, but it's really hard to explain what I'm trying to accomplish.
I want to detect which checkboxes were checked and then show the number input into the inputs that their checkboxes were checked.
Here's a drawing (pardon me for my sh*tty explanation):
[X] |3_____________|
[_] |4_____________|
[X] |10____________|
[X] |4_____________|
[X] |1_____________|
3,,10,4,1
My code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<title>jQueryForm</title>
</head>
<body ng-app="">
<div id="form">
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data1" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data2" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data3" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data4" />
<br/>
<input type="checkbox" />
<label>Data:</label>
<input type="number" ng-model="data5" />
<br/>
<div id="data">{{data1 +","+ data2 +","+ data3 +","+ data4 +","+ data5}}</div>
</div>
</body>
</html>
If I understand you correctly, you want to hide those numbers in the <div id="data"> that don't have a checked checkbox. For this, your checkboxes need an ng-model as well:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<title>jQueryForm</title>
</head>
<body ng-app="">
<div id="form" ng-init="dataSet = [{},{},{},{},{}]">
<div ng-repeat="data in dataSet">
<input type="checkbox" ng-model="data.checked"/>
<label>Data:</label>
<input type="number" ng-model="data.number" />
<br/>
</div>
<span ng-repeat="data in dataSet">
<span ng-if="data.checked">{{data.number}}</span>
<span ng-if="!$last">,</span>
</span>
</body>
</html>
Now, I did quite a lot of things here. First, I assumed you want the solution to work for more than 5 elements. That's what the ng-init is for. It initializes the scope variable dataSet as an array of 5 objects. Of course, this should come from a controller, but to keep it to HTML here, I used ng-init.
Secondly, I used ng-repeat to iterate over the objects in dataSet and repeatedly create DOM objects.
Next, I gave the checkbox an ng-model (namely data.checked), which corresponds to dataSet[$index].checked.
Last, but not least, the output is handled in an ng-repeat as well - to keep it adjustable to the size of dataSet. $last is a special variable within an ng-repeat scope that is true if it's the last element.
The below code is just to give you an idea of how it works. You can extend this idea. It's the ng-if that you have to use. ng-if documentation here.
<div id="form">
<input type="checkbox" ng-model="check1" />
<label>Data:</label>
<input type="number" ng-model="data1" />
<span ng-if="check1">{{data1}}</span>
</div>
There are multiple ways to deal with this. The basic idea is you have to provide the link between check box and the input field. It needs a way to show/hide input field based on checked item.
Check this plunk here
<body ng-app="checkboxExample">
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.dataModel={};
$scope.checkboxOptions = {
data1: true,
data2: true,
data3: true,
data4: true,
data5: true,
};
//or
// $scope.checkboxOptions ={}; //this will generate falsey statement for checkboxOptions.data1
}]);
</script>
<div id="form" ng-controller="ExampleController">
<input type="checkbox" ng-model="checkboxOptions.data1" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data1" ng-model="dataModel.data1" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data2" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data2" ng-model="dataModel.data2" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data3" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data3" ng-model="dataModel.data3" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data4" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data4" ng-model="dataModel.data4" />
<br/>
<input type="checkbox" ng-model="checkboxOptions.data5" />
<label>Data:</label>
<input type="number" ng-if="checkboxOptions.data5" ng-model="dataModel.data5" />
<br/>
<div id="data">{{dataModel.data1 +","+ dataModel.data2 +","+ dataModel.data3 +","+ dataModel.data4 +","+ dataModel.data5}}</div>
</div>
</body>
I need to make a system to change the total price by number of tickets selected. I created some radio buttons to choose the number of ticket. The ploblem is that the default value is unset and the result is null on loading.
<input type="radio" ng-model="people" value="1" checked="checked"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
Please see my jsfiddle.
Set a default value for people with ngInit
<div ng-app>
<div ng-init="people=1" />
<input type="radio" ng-model="people" value="1"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
<li>{{10*people}}€</li>
<li>{{8*people}}€</li>
<li>{{30*people}}€</li>
</ul>
</div>
Demo: Fiddle
<div ng-app="" ng-controller="myCntrl">
<input type="radio" ng-model="people" value="1"/><label>1</label>
<input type="radio" ng-model="people" value="2"/><label>2</label>
<input type="radio" ng-model="people" value="3"/><label>3</label>
</div>
<script>
function myCntrl($scope){
$scope.people=1;
}
</script>
why not just ng-checked="true"
In Angular 2 this is how we can set the default value for radio button:
HTML:
<label class="form-check-label">
<input type="radio" class="form-check-input" name="gender"
[(ngModel)]="gender" id="optionsRadios1" value="male">
Male
</label>
In the Component Class set the value of 'gender' variable equal to the value of
radio button:
gender = 'male';
<input type="radio" name="gender" value="male"<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>: "checked='checked'" %> >Male
<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>