new in angular here.
I have an input field disabled base on the radio button, if the radio button was selected, I first want the input field value to null and then disabled it.
Here is my current example:
<input type="radio" ng-model="vm.radio" value="selected" /> Sample
<input type="text" ng-model="vm.input" ng-disabled="vm.radio='selected'" />
When input have the value, it just disabled and keep the input value.
I can do check inside the controller like
if(vm.radio=='selected') { vm.input = null }
But it only work when I active the function via the button. Is there any good way to handle it at HTML page, on the change event? Not in a controller script.
take a look at this plnkr: https://plnkr.co/edit/IygRaPlBmLzdnI0jhAQn?p=preview
You can use ng-change specifying an expression
<input type="radio" ng-model="vm.radio" value="selected" ng-change="vm.radio === 'selected' ? vm.input = '' : '' " /> Sample
<input type="radio" ng-model="vm.radio" value="b" /> Sample2
<input type="text" ng-model="vm.input" ng-disabled="vm.radio === 'selected'" />
Related
I have a method that is toggling between two inputs.
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
}
<a ng-click="$ctrl.toggleModToLod(configurableOption)" ng-init="">MOD or LOD</a>
<input ng-if="configurableOption.isModField" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="!configurableOption.isModField" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
It works fine, but if i had before filled the MOD field and after that i changed to LOD field the request contain both values, is there any way to have in my request only the selected value from the selected input ?
You can make the switch a toggle or checkbox or other form element
<label><input type='radio' ng-model="value.which" value='MOD' /> MOD</label>
<label><input type='radio' ng-model="value.which" value='LOD' /> LOD</label>
<input ng-if="value.which=='MOD'" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="value.which=='LOD'" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
Then when you send your request, you'll have the which variable which will tell you which value to use. Additionally, you'll have a built in switcher that will automatically work by setting value.which
just clear both values from model everytime you toggle:
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
$scope.value.mod = undefined; // however you're setting these on the controller / directive
$scope.value.lod = undefined;
}
I have a text box and two radio button controls with yes or no value. If I click on Yes, the text box should be enable and it should be disabled on No selection. I have used ng-disabled property.
But, if user selects No, saves the file and reopens it, the text box is getting enabled again. Is there a way to save the text box state?
I have tried using disabled="" on textbox. but if user selects yes, enters some value and saves the files, the textbox is getting disabled again. if user selects Yes, the textbox should not be disabled till he selects No
I am talking about index.html file.
Below is my chunk of code:
<input type="radio" name="something" value="1" ng-model="checkboxSelection"/>Checkbox 1
<input type="radio" name="something" value="2" ng-model="checkboxSelection"/> Checkbox 2
<input type="text" ng-model="somevalue" name="somevalue" ng-disabled="checkboxSelection=='2'"/>
try this
<input type="checkbox" ng-click="disable = !disable">
<input type="text" ng-disabled='disable'/>
If you want to clear the value of the input after check no, use a function in you're controller
<input type="radio" ng-model="disable_input" ng-value="true" />
<input type="radio" ng-model="disable_input" ng-value="false" />
<input type="text" ng-disabled="disable_input" />
I'm not sure if you want to use and input or textarea as your "textbox" but all you would need to do to make it a textarea instead is use the ng-disabled in the last input element in a textarea instead.
I'm trying to disable a input field as soon as submit button is click. The angular way suggest this:
here button is disabled when check box is checked. same way I need to disable the input field when I click button.
<input type="checkbox" ng-model="check"> </input>
<input type="checkbox" ng-disabled="check">Checkbox to be disabled</input>
IJust set/reset the variable triggering disabled on input field in the click event of button:
Search : <input ng-model="query" ng-disabled="isDisabled" />
<button ng-click="isDisabled = true;">Name</button>
JSFiddle : http://jsfiddle.net/4YtLu/108/
<input type="checkbox" ng-disabled="isDisabled">Checkbox to be disabled</input>
in your controller, on submit set
$scope.isDisabled=true;
Suppose I have the following setup:
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
In AngularJS, is there any way for me to determine when, say, the user deselects #text1, for example by clicking #text2, or clicking somewhere else on the screen? I am aware the ng-change lets me listen to changes in the value of #text1 itself, but I see no way to determine when the user actually leaves the field.
You can use ngBlur for this
https://docs.angularjs.org/api/ng/directive/ngBlur
<form>
<input type="text" id="text1" ng-blur="iHaveLostFocusDoSomethingWithIt()">
<input type="text" id="text2">
</form>
In my HTML page, I have two sets of Boolean based radio buttons: Labeled: "Yes" and "No" / Values: True and False respectively. I'm populating a full form from a PostgreSQL database table to allow the authenticated user to view the form with populated data and edit the populated fields including the radio buttons, then save the form which will save the data to the DB. All of the other text fields populate without issue; it's both collection of radio buttons I am having an issue with pre-checkmarking the radio buttons.
The below does not pre-populate the checked on front end (but adds the correct attribute of checked in HTML source):
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />
However, this does check the correct radio button on load:
<input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
<input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />
Note: I needed to check against the string boolean value in the directive ng-checked since the boolean value always comes back as a string from PostgreSQL. This, apparently, was a part of PostgreSQL's design when querying data from columns that have boolean data types.
When adding the ng-model directive, the radio button no longer is checked (at least in the rendered browser view). The odd part is that I looked at the source and it clearly checks the correct one. What's even more odd, is that I have to click on the radio button twice to 'check' it. I've tested this in latest version of Chrome, FF, and IE and it all results in the same issue.
The question is: when adding the ng-model directive, why would the HTML source add 'checked' in the radio button attribute, but seemingly does not mark the radio button? Furthermore, why would I have to click twice on the radio button that IS supposed to be checked?
Solution:
To fix this, I removed the ng-checked directive from the radio buttons and only used ng-model as suggested by #Cypher and #aet. I then replaced the attribute value with the directive ng-value "true" & "false". After, I set the values in the controller.
HTML
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />
Angular JS
app.controller('peopleCtrl', function($scope, peopleFactory){
...
peopleFactory.getPerson(personParams).then(function(data){
$scope.person = data;
/* moved from ng-checked */
$scope.person.billing = data.billing == 'true';
});
...
};
I think you should only use ng-model and should work well for you, here is the link to the official documentation of angular https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
The code from the example should not be difficult to adapt to your specific situation:
<script>
function Ctrl($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}
</script>
<form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color | json}}</tt><br/>
</form>
I solved my problem simply using ng-init for default selection instead of ng-checked
<div ng-init="person.billing=FALSE"></div>
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="FALSE" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="TRUE" />
[Personal Option]
Avoiding using $scope, based on John Papa Angular Style Guide
so my idea is take advantage of the current model:
(function(){
'use strict';
var app = angular.module('way', [])
app.controller('Decision', Decision);
Decision.$inject = [];
function Decision(){
var vm = this;
vm.checkItOut = _register;
function _register(newOption){
console.log('should I stay or should I go');
console.log(newOption);
}
}
})();
<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/1.9.1/jquery.min.js"></script>
<div ng-app="way">
<div ng-controller="Decision as vm">
<form name="myCheckboxTest" ng-submit="vm.checkItOut(decision)">
<label class="radio-inline">
<input type="radio" name="option" ng-model="decision.myWay"
ng-value="false" ng-checked="!decision.myWay"> Should I stay?
</label>
<label class="radio-inline">
<input type="radio" name="option" ng-value="true"
ng-model="decision.myWay" > Should I go?
</label>
</form>
</div>
</div>
I hope I could help ;)
Please explain why same ng-model is used? And what value is passed through ng- model and how it is passed? To be more specific, if I use console.log(color) what would be the output?