I am using angular and have a radio input like this (in a form, if it matters):
<input type="radio"
name="inputName"
id="someId"
data-ng-value=true <!-- This select "true" for my ng-model when clicked-->
ng-model = "nameOfMyVarIn$scope"
ng-change = "thisRunsWhenSelectionIsmade(true)"
required></input>
I want to clear this input. Clearing the variable bound to ng-model clears the variable, but not the checkbox. I can't find how to clear the radio button itself in the docs or in random articles - it stays selected. I made a quick copy of the example from the docs and added $scope.clearSelection - the goal is to have this function de-select the selected input. In the real application I have other inputs in the form, so I can't just clear the whole form.
Plnkr
Using your Plnkr, I've set color to null and it cleared the value. Is this what you want?
$scope.clearSelection = function(){
$scope.color = null;
}
Here is the updated Plnkr
Related
I'm using AngularJS and filter option. When I select an item in radio buttons, its getting right data.
<input ng-click="filter = !filter" ng-value="!filter" ng-checked="filter" type="radio" ng-model="ctrl.filter[category]" />
But I need allow one select in radio buttons and its not working. What's the problem? Thanks.
DEMO
To properly work, radio inputs need a name attribute. It should be the same for all radio of the groupe.
You also need to change the ng-model of the radio to store its value in a single property.
<input ng-click="filter = !filter" ng-value="category" name="wineCategory" ng-checked="filter" type="radio" ng-model="ctrl.filter" />
Finally you need to adapt your filter methods.
All the inputs in the Radio box group must have only one reference to an ng-model which is typically the value of the input.
So, your input markup would be
<input value="{{category}}" type="radio" ng-model="ctrl.filterCategory" />
Where the value = category would be red, while or champagne.
Now likewise your filter function would change to use the ng-model like this
function filterByCategory(wine) {
return (self.filterCategory === wine.category || self.filterCategory === "") ? 'show':'hide';
}
Working demo here.
http://jsfiddle.net/nah42h1c/2/
I have a form with md-select and md-radio-button fields. The options under radio button will be displayed according to the option selected in md-select. Please visit the plunker.
You can see I have created the form with the sub-organism radio-button field to be required. It works on the first load. But if we select any sub radio button option and then change the organism select box, the form is still valid, without having a valid sub-orgranism value. I need the form to be invalid, if the sub radio button is not checked. Please help.
Question 2 : Also in the plunk, please uncomment the following lines after line 47 in app.component.ts so that there will be a default value for the fields. The sub organism radio buttons will be displayed, but the selectbox will be blank. There is the selected value and thats the reason why sub organism fields are displayed. Not sure why the option is not selected for organisms md-select.
Add a change event to md-select so that if the selection changes, and the form was validated, you can reset the value of selected.sub_organism_id to null. That will make the form invalid.
Code snippets:
html:
<md-select [formControl]="form.controls['organism']"
style="width:100%;"
[(ngModel)]="selected.organism_id"
(change)="resetForm($event)">
<md-option *ngFor="let organism_id of getIds()" [value]="organism_id">
{{ organisms[organism_id].name }}
</md-option>
</md-select>
ts:
resetForm(org){
if(this.form.valid){
this.selected.sub_organism_id = null;
};
}
Edited Plunk
Update:
Like #WillHowell said in his comment, "md-select compares values by object reference not object value" which is true. I modified your data to an array-object relation, and md-select default value worked here.
I would like manage with AngularJS UI which allows to pick one of the options (displayed as radio buttons group) or a custom value typed in a input-text.
It should look like:
http://jsbin.com/foyujali/7/edit
Here is the code that you can see also in the link below:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<div ng-app="tagsApp" ng-controller="TagsCtrl">
<input type="radio" id="conversion_type_sale" ng-model="tag.conversion_type" value="sale"/>
<label for=conversion_type_sale>Sale</label>
<input type="radio" id="conversion_type_lead" ng-model="tag.conversion_type" value="lead"/>
<label for=conversion_type_lead>Lead</label>
<input type="radio" id="conversion_type_custom" ng-model="tag.conversion_type" value="{{tag.conversion_type_custom_value}}"/>
<input type="text" placeholder="Custom" ng-model="tag.conversion_type_custom_value" id="conversion_type_custom_value"/>
<p>
The choosen conversion type is: <strong>{{tag.conversion_type}}</strong>
</p>
</div>
And JS:
angular.module('tagsApp', []).
controller('TagsCtrl', function ($scope) {
$scope.tag = {conversion_type: 'lead'};
});
I would prefer not to use ngChange directive so I just bind the value or ng-value (I tried both) to the model of the input-text. It doesn't work properly this way, but I suppose there is an elegant AngularJS solution. Any suggestions?
Thanks in advance!
P.S. Just to clarify - I want the following functionality: http://jsbin.com/foyujali/10/edit but I want to avoid using ngChange directive.
This is what you're looking for: http://jsfiddle.net/colares/shcv8e1h/2/
Explaning the behavior
By focusing on the text field, the radio on the left is selected and chosen value is updated regarding the value of the text field;
By focusing on radio on the left of the text field, the chosen value is updated according to what is in the text field as well;
By changing the value of the text field, the chosen value is also updated;
Finally, by focusing on any other label or radio, the custom value remains, while the chosen value is update regarding the selected option.
To do so, I had to use a few more things in custom option input:
ng-focus: when I click on the text field, it updates the chosen value regarding the text field;
ng-change: as I update the text field, the final value is also updated;
ng-model: to store the auxiliar variable customColor, which remains regardless of the selected value.
Remember, the ng-value is used to set the value of the radio (or an <option>) from a given expression when we select it. This makes the radio and input text "bound", because they have the same value.
You could use $scope.$watch and look for the change in your controller like so:
http://jsfiddle.net/2R6aN/
var app = angular.module('tagsApp',[]);
app.controller('TagsCtrl', function ($scope) {
$scope.tag = {conversion_type: 'lead'};
$scope.$watch('conversion_type_custom_value',function(new_val) {
if (new_val) {
$scope.tag.conversion_type = new_val;
}
});
});
$watch is best option. Also, Instead of using modelName in 1st parameter of $watch, you can create your own stuff(eg. watching length of input box) and do desired action on it with second parameter.
Here is the documentation I'm looking at : Example Adding Radio Buttons
It says:
KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute
Which I have done in this: jsfiddle
self.radioValue = ko.observable(1);
and the HTML:
<input type="radio" name="teloremail" value="1" data-bind="checked: radioValue" />
For me, this doesn't automatically set the radio to checked
Any reason for this?
The type of the radio button node’s value attribute is string, so you need to store the value as string also in your observable:
self.radioValue = ko.observable("1");
Demo JSFiddle.
The example also uses a string: "almond".
Ok, I have a situation where I have a page which has checkboxes on it next to items with input text fields.
I have a button at the top with the same fields of which the user can use to apply the settings to all the fields in the page that have been selected with their respective checkbox.
I'm trying to work out how to get all the checkboxes in the page that have been checked an then loop through them so I can possibly grab the ID for that row and then update the respective items, but I'm not 100% sure how to do this.
Each of the checkboxes on the page have the same class name, so I thought something like this would work..
var selected = $('input:checked', '.discount_select');
But it doesn't appear to work.
Here is a example checkbox and it's corresponding text box..
<input type="text" size="4" name="discount[101129]">
<input type="checkbox" value="1" class="discount_select" name="select[101129]">
So basically I wanna loop through the found selectec checkboxes, hopefully be able to pull out the id 101129 somehow and then be able to update the textbox with that same id.
JsFiddle: http://jsfiddle.net/79udU/
This should work:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val(this.name);
});
});
Demo: http://jsfiddle.net/79udU/1/
Edit: To actually apply the value from the top input, use this:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val($("#apply_discount").val());
});
});
Demo: http://jsfiddle.net/79udU/2/
you need
var selected = $('input.discount_select:checked' );