This works fine, except I cannot initialize var1 as "" or null. I'd like the "All" item to be selected, but it seems to not register as "All" via ng-value. Once the value is clicked, it seems to work.
angular.module('myApp', []);
angular.module('myApp').controller('test_controller1', function($scope) {
$scope.colors = [ "red", "green", "blue" ];
$scope.var1 = "";
});
...
<input type="radio" ng-model="var1" ng-value="" id="all"> <label for="all">All</label>
<input type="radio" ng-model="var1" ng-value="'red'" id="red_id"> <label for="red_id">red</label>
<input type="radio" ng-model="var1" ng-value="'green'" id="green_id"> <label for="green_id">green</label>
<input type="radio" ng-model="var1" ng-value="'blue'" id="blue_id"> <label for="blue_id">blue</label>
https://plnkr.co/edit/UyaKv2UFpWOyoMvpuDE9?p=preview
Just realized ng-value="''" works the way I'd like. Nevermind.
Related
Suppose I want to present a few default options for the user but also want to allow them to enter their own value.
e.g.
Please select one of the following:
[ ] apple
[ ] pear
[ ] other: ___________
I want it so that if "other" is selected, then the input field that follows should be enabled and allow typing.
Html might look like this:
<input type="radio"
name="fruit"
ng-model="fruit"
value="apple"
> apple
<input type="radio"
name="fruit"
ng-model="fruit"
value="pear"
> pear
<input type="radio"
name="fruit"
ng-model="???"
value="???"
> Other:
<input type="text"
class="form-control"
ng-model="fruit"
ng-disabled="???">
What would you do here?
I had an implementation where the default options trigger an action on ng-change such that it changed a $scope.isOther to true, which would enable the input box and check the other radio box like so
<input type="radio"
name="fruit"
ng-model="fruit"
value="apple"
ng-change="isOther=true"
> apple
<input type="radio"
name="fruit"
ng-model="fruit"
value="pear"
ng-change="isOther=true"
> pear
<input type="radio"
name="fruit"
ng-model="isOther"
ng-change="fruit=null"
value="true"
> Other:
<input type="text"
class="form-control"
ng-model="fruit"
ng-disabled="!isOther">
That sort of works. But when I reload the page/data, if I have an "other" value entered, it doesn't know to automatically check "other", although my "other" value is in the input box. I could write some more code change the isOther value when I'm loading the data but I'm wondering if I'm even going about this the right way or whether there's a "catch all" that allows a radio box to be checked if it doesn't match any other values.
You can do it this way:
var myapp = angular.module('myApp', []);
myapp.controller('MyController', function($scope) {
$scope.fruits = ['apple', 'orange', 'plum', 'pear'];
$scope.fruit = {selectedOption: 'orange'};
$scope.isDisabled = function() {
if (_.contains($scope.fruits, $scope.fruit.selectedOption)) {
return true;
}
return false;
};
$scope.add = function() {
if($scope.x !== undefined && $scope.x !== '') {
$scope.fruits.push($scope.x);
$scope.fruit.selectedOption = $scope.x;
$scope.x = '';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id='main' ng-app='myApp'>
<form name="myForm" ng-controller="MyController">
<div ng-repeat="f in fruits track by $index">
<input type="radio" name="fruit" ng-model="fruit.selectedOption" value={{f}}> {{f}}
</div>
<input type="radio" name="fruit" ng-model="fruit.selectedOption" value="other"> Other:
<input type="text" ng-model="x" ng-disabled="isDisabled()" ng-blur="add()">
<br> fruit = {{fruit.selectedOption}}
</form>
</div>
JSFiddle
I don't have a perfect answer, but I ended up doing it this way
html:
<div id='main' ng-app='myApp'>
<form name="myForm" ng-controller="MyController">
<div ng-repeat="f in fruits track by $index">
<input type="radio" name="fruit" ng-model="fruit.value" ng-value="f" ng-change="disableOther()"> {{f}}
</div>
<input type="radio" name="otherfruit" ng-change="fruit.value=null" ng-model="isOther" ng-value="true"> Other:
<input type="text" ng-model="fruit.value" ng-change="checkOther()" ng-class="{'disabled-input':isStandardFruit()}">
<br> fruit = {{fruit.value}}
</form>
</div>
code:
var myapp = angular.module('myApp', []);
myapp.controller('MyController', function($scope) {
$scope.fruits = ['apple', 'orange', 'plum', 'pear'];
$scope.fruit = {value:'orange'};
$scope.isStandardFruit = function() {
for(var i=0; i<$scope.fruits.length; i++) {
if( $scope.fruits[i] == $scope.fruit.value ) {
return true;
}
}
return false;
}
$scope.disableOther = function() {
$scope.isOther = false;
}
$scope.checkOther = function() {
if( !$scope.isStandardFruit() ) {
$scope.isOther = true;
}
}
});
JSFiddle
The one drawback is that if you type a standard fruit into the "other" input box, then it selects multiple radio buttons. I could uncheck the "other" button but then you couldn't type a fruit that contained the standard fruit as a prefix (e.g. you wouldn't be able to type "apple pear")
If anyone can come up with a better answer, I will change my vote and answers
Hi I am currently working on one AngularJS ionic app but facing a problem in settings up model value in the view.
It a simple form with fields defined.
<input type="number" ng-model="form.field1" />
<input type="number" ng-model="form.field2" ng-change="count=form.field1+form.field2" />
<input type="number" ng-model="form.field3" ng-init="form.field3=count" ng-value="count"/>
On third field I can see the value displayed but when submit to server it had "0" not the counted value.
In the controller I had
$scope.form={};
Any help appreciated, new to AngularJS.
You don't need ng-change. You can just watch the variable and update it using $scope.$watch. You can remove ng-init and ng-value from your inputs too.
var myApp = angular.module('myApp', []);
myApp.controller('ctrl', ['$scope', function ($scope) {
$scope.form={};
$scope.$watch('form.field1 + form.field2', function (value) {
$scope.form.field3 = value;
});
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<input type="number" ng-model="form.field1" />
<input type="number" ng-model="form.field2"/>
<input type="number" ng-model="form.field3"/>
</div>
I have created the ngchange function and post the calculation there:
<input type="number" ng-model="form.field1" />
<input type="number" ng-model="form.field2" ng-change="Myfunction()" />
<input type="number" ng-model="form.field3" />
Controller
$scope.form = {
field1: 0,field2: 0, field3: 0
};
$scope.Myfunction = function() {
$scope.form.field3 = $scope.form.field1 + $scope.form.field2;
}
Working Demo
Also we don't need count, ng-init or ng-value now.
I have 2 radio buttons. I'd like to bind different attributes for each radio button. Eg:
<label>
Foo
<input type="radio" name="test" value="foo"/>
</label>
<label>
Bar
<input type="radio" name="test" value="bar"/>
</label>
radio foo has values "id" : "id1", "value" : "foo"
radio bar has values: "id" : "id2", "value" : "bar"
And the binding to a <p> should be something like:
<p>The id for selected radio is {{ radio.id }}, and value for it is {{ radio.value }}</p>
Resulting in "The id for selected radio is id1, and value for it is foo"
Yes. You can create an object for each radio button and assign id and value properties to the objects.
Example: https://jsfiddle.net/x9nfke0d/
Angular:
function Controller() {
var vm = this;
vm.selected_radio = null;
vm.foo = {
id: 1,
value: 'Foo'
};
vm.bar = {
id: 2,
value: 'Bar'
};
vm.setRadio = setRadio;
function setRadio(obj) {
vm.selected_radio = obj;
}
}
HTML:
<label>
Foo
<input type="radio" name="test" ng-click="ctrl.setRadio(ctrl.foo)">
</label>
<label>
Bar
<input type="radio" name="test" ng-click="ctrl.setRadio(ctrl.bar)">
</label>
You could go a step further and create an array of radio objects, then repeat them in a ng-repeat.
Working Fiddle Here
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.foo = {bar:"foo"};
}]);
<section ng-controller="MyCtrl">
{{foo.bar}}
<label>Foo<input ng-model="foo.bar" type="radio" name="test" value="foo"/></label>
<label>Bar<input ng-model="foo.bar" type="radio" name="test" value="bar"/></label>
</section>
I have a radio button being selected like this:
<input type="radio" ng-model="lesson.sectionID" value="{{section.$id}}">
I want to bind the value of that input to another model, I tried the following:
<input type="text" ng-model="module.sectionID" ng-bind="lesson.sectionID">
and
<input type="text" ng-model="module.sectionID" ng-value="lesson.sectionID">
When I tried ng-value it set the text input to the correct value but the actual value of the model was not being set.
You can assign your model using
ng-model="module.sectionID"
ng-value="module.sectionID=lesson.sectionID"
You probably looking for this solution
angular.module('choices', [])
.controller("MainCtrl", ['$scope', function($scope) {
$scope.color = '';
$scope.colors = [
"Red",
"Green",
"Blue",
""
];
$scope.changeColor = function(){
$scope.color = "Red"
};
}]);
<html>
<head>
<body ng-app="choices" ng-controller="MainCtrl">
<div ng-repeat="color in colors">
<input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color">
<label >
{{color || 'Other'}}
</label>
<input type="text" ng-model="$parent.color" ng-show="color==''">
</div>
<p></p>
The chosen color is <strong>{{color}}</strong>
<p></p>
<button ng-click="changeColor()">Change color</button>
</body>
</html>
I searched and tried many ng-xxxx kind of options but couldn't find the one..
I just want to call some function in the controller when radio button is selected.
So it might be similar to following..(Of course, below code is not working)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
Is there any way to achieve what I want?
There are at least 2 different methods of invoking functions on radio button selection:
1) Using ng-change directive:
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
and then, in a controller:
$scope.newValue = function(value) {
console.log(value);
}
Here is the jsFiddle: http://jsfiddle.net/ZPcSe/5/
2) Watching the model for changes. This doesn't require anything special on the input level:
<input type="radio" ng-model="value" value="foo">
but in a controller one would have:
$scope.$watch('value', function(value) {
console.log(value);
});
And the jsFiddle: http://jsfiddle.net/vDTRp/2/
Knowing more about your the use case would help to propose an adequate solution.
Should use ngChange instead of ngClick if trigger source is not from click.
Is the below what you want ? what exactly doesn't work in your case ?
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = "none" ;
$scope.isChecked = false;
$scope.checkStuff = function () {
$scope.isChecked = !$scope.isChecked;
}
}
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="one" ng-change="checkStuff()" />
<span> {{value}} isCheck:{{isChecked}} </span>
</div>
In newer versions of angular (I'm using 1.3) you can basically set the model and the value and the double binding do all the work this example works like a charm:
angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="color.name" value="red"> Red <br/>
<input type="radio" ng-model="color.name" value="green"> Green <br/>
<input type="radio" ng-model="color.name" value="blue"> Blue <br/>
<tt>color = {{color.name}}</tt><br/>
</form>
</body>
</html>
For dynamic values!
<div class="col-md-4" ng-repeat="(k, v) in tiposAcesso">
<label class="control-label">
<input type="radio" name="tipoAcesso" ng-model="userLogin.tipoAcesso" value="{{k}}" ng-change="changeTipoAcesso(k)" />
<span ng-bind="v"></span>
</label>
</div>
in controller
$scope.changeTipoAcesso = function(value) {
console.log(value);
};
Another approach is using Object.defineProperty to set valueas a getter setter property in the controller scope, then each change on the value property will trigger a function specified in the setter:
The HTML file:
<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>
The javascript file:
var _value = null;
Object.defineProperty($scope, 'value', {
get: function () {
return _value;
},
set: function (value) {
_value = value;
someFunction();
}
});
see this plunker for the implementation
i prefer to use ng-value with ng-if,
[ng-value] will handle trigger changes
<input type="radio" name="isStudent" ng-model="isStudent" ng-value="true" />
//to show and hide input by removing it from the DOM, that's make me secure from malicious data
<input type="text" ng-if="isStudent" name="textForStudent" ng-model="job">
<form name="myForm" ng-submit="submitForm()">
<label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
<div>currently selected: {{radioValue}}</div>
<button type="submit">Submit</button>
</form>