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>
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
I need to check which input element has modified in update form.
<form name="utilizationForm" role="form" novalidate>
<div class="row" data-ng-repeat="i in [1,2,3,4]">
<div class="col-md-3">
<div asterick class="form-group" ng-class="{'form-group has-success': !error['resource_type'] && (submitted), 'form-group has-error': (error['resource_type']) && (submitted)}">
<label for="resourceType">Resource Type</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<select name="resourceType" id="resourceType" ng-model="data['resource_type' + i]" class="form-control" ng-required="true" >
<option ng-repeat="option in resourceTypeJson" value="{{option}}">{{option}}</option>
</select>
<span class="er-block" ng-show="utilizationForm.resourceType.$touched && utilizationForm.resourceType.$error.required">Please provide Resource type.</span>
<span ng-show="error.resource_type1" class="er-block">{{error.resource_type1}}</span>
</div>
</div>
<div class="col-md-3">
<label for="efforts">Efforts (in hours)</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<input type="text" test-change name="efforts" id="efforts" class="form-control" ng-model="data['efforts' + i]" value="">
</div>
</div>
<div class="text-right" ng-class="{'col-md-6 mt25': showCompletion}">
<button class="btn btn-primary" ng-disabled="utilizationForm.$invalid" ng-click="addUtilizationReport()">{{buttonText}}</button>
</div>
</form>
Now when I click on update button I need to check which input element has modified in update form in controller. Please help.
If you put the input in a form with a name attribute and then give the input a name attribute, you can also access the input's $dirty property.
<div ng-controller="MyController">
<form name="myForm">
<input type="text" name="first" ng-model="firstName">
<input type="text" name="last" ng-model="lastName">
</form>
</div>
app.controller('MyController', function($scope) {
// Here you have access to the inputs' `$dirty` property
console.log($scope.myForm.first.$dirty);
console.log($scope.myForm.last.$dirty);
});
You can use $scope.myForm.$dirty to see if any fields have changed, and the $dirty property on each input's property on the form to see if that input has changed. You can even iterate over the myForm object (non-input-field objects have keys prefixed with a $):
angular.forEach($scope.myForm, function(value, key) {
if(key[0] == '$') return;
console.log(key, value.$dirty)
});
Here is simplest example of using $watch in controller:
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope, $location) {
$scope.$watch('abc', function(newVal,oldVal) {
if(oldVal != newVal){
alert("value changed!");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="appCtrl">
<input type="text" name="first" ng-model="abc">
</div>
<div class="radio-inline" ng-repeat="customerOption in customerOptions">
<input type="radio" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
</div>
This doesn't seem to do anything:
ng-attr-id="{{customerOption.Value}}"
or:
ng-attr-id="customerOption.Value"
or:
id="customerOption.Value"
These puts exactly that line in the html
That's a quick plunker to show use of ng-model for default radio
http://plnkr.co/edit/F3M2fzLaYYrIwQdtuwHT?p=preview
app.controller('MainCtrl', function($scope) {
$scope.gender = 'female';
});
<body ng-controller="MainCtrl">
<input type="radio" name="sex" value="male" ng-model="gender">Male
<br>
<input type="radio" name="sex" value="female" ng-model="gender">Female
</body>
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>
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'": "" %>