I have radio button group in my angular page. Below is my code,
<span ng-repeat="radioButtonItem in radioButtonItem.Values">
<label class="radio-inline">
<input type="radio"
name="radioButtonName"
value="{{radioButtonItem.Id}}"
ng-model="radioButtonItem.SelectedValues"
ng-change="changeRadioButton()" />
{{radioButtonItem.Value}}
</label>
</span>
Ex :
Radio button 1 : .Male .Female
Radio button 2 : .ax .sy
Radio button 3 : .c .v
when i select the first group radio button say male and select the second group radio button say ax first
one is deselect(male). How to retain the values in radio button group?
Because your name is same for all the groups. Generate it dynamically too.
Here is how you could do it. I have attached an example too.
<input type="radio"
name="{{radioButtonItem.groupName}}"
value="{{radioButtonItem.Id}}"
ng-model="radioButtonItem.SelectedValues"
ng-change="changeRadioButton()"/>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.cell = {
evaluator: "Guava2"
};
$scope.cell1 = {
evaluator: "Apple1"
};
$scope.evaluators = [{
name: "Guava1",
groupName: "guava"
}, {
name: "Guava2",
groupName: "guava"
}];
$scope.evaluators1 = [{
name: "Apple1",
groupName: "peachy"
}, {
name: "Peach2",
groupName: "peachy"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<div>Which one?</div>
<label class="radio" ng-repeat="eval in evaluators">
<input type="radio" ng-model="cell.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
</label>
<hr />
<div>You picked: {{cell.evaluator}}</div>
<br/>
<label class="radio" ng-repeat="eval in evaluators1">
<input type="radio" ng-model="cell1.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
</label>
<div>You picked: {{cell1.evaluator}}</div>
</div>
</div>
</body>
</html>
Related
I have two criteria:
1) Only allow one of two boxes selected at one time.
2) Capture the name of the box that is selected.
However, when I print out the list of checkbox objects they are correct, but when I check in the console they are not correct. For example,
HTML:
<div ng-repeat="treatment in treatment_list">
<input type="checkbox" value="{{treatment.name}}"
ng-model="treatment.checked"
ng-click="updateTreatment($index, treatment_list);
checkedTreatment(treatment_list)">
<label>Treatment {{treatment.name.toUpperCase()}}</label></input><br>
</div>
{{treatment_list}}
Controller:
$scope.treatment_list = [
{
name: 'a',
checked: false
}, {
name: 'b',
checked: false
}
];
$scope.updateTreatment = function(position, treatment_list) {
console.log(treatment_list);
angular.forEach(treatment_list, function(treatment, index) {
console.log(treatment.name, treatment.checked);
if (position != index) {
treatment.checked = false;
}
});
};
$scope.$watch('treatment.checked', function (treatment) {
console.log(treatment);
});
Plunker:
https://plnkr.co/edit/Hkb4IeKxi0TRqHRJA4JN?p=preview
Inorder to fullfill your requirement you should just use a radio box whith ng-model, it will work out of the box for you.
Use radio buttons instead:
angular.module("app",[])
.controller('ExampleController', function($scope) {
$scope.color = {
name: 'blue'
};
$scope.specialValue = {
"id": "12345",
"value": "green"
};
$scope.colorChange = function(color) {
console.log(color);
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<form name="myForm" ng-controller="ExampleController">
<label>
<input type="radio" ng-model="color.name" value="red"
ng-change="colorChange(color.name)" />
Red
</label><br/>
<label>
<input type="radio" ng-model="color.name" ng-value="specialValue"
ng-change="colorChange(color.name)" />
Green
</label><br/>
<label>
<input type="radio" ng-model="color.name" value="blue"
ng-change="colorChange(color.name)" />
Blue
</label><br/>
<tt>color = {{color.name | json}}</tt><br/>
</form>
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</body>
For more infomation, see AngularJS input type=radio Directive API Reference
I have a select option and file upload control. The default value of dropdown is set to select. I have a file upload control, where on load the upload button should be disabled/hidden and when user selects an item other than select in dropdown the upload button should be enabled, and a custom message should be shown about the option selected in dropdown. I have tried the below, but seems to be an issue. In index.html
<body ng-controller="Main as vm">
<div class="container">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Select Environment :<em style="color:red">*</em></label>
</div>
<div class="col-sm-4 form-group">
<select name="mySelect" id="mySelect" class="dropdown form-control cl-sm-6" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption" ng-change="selectEnvironmentChanged()" ></select>
</div>
<label ng-show="vm.showWarning">Warning message</label>
<label ng-show="vm.showEnvironmentMessage">You have selected </label>
</div>
<div class="row">
<div class="form-group" >
<label for="newfiles">Select and upload files</label>
<input type="file" id="imageUploadfile" class="uploadFile" accept="image/*" my-files="files" ngf-multiple="false" />
</div>
<div class="col-sm-4 form-group">
<input class="btn btn-primary" type="button" ng-if="showBtns" ng-show="showUpload" ng-click="uploadNewFiles()" value="upload" />
</div>
</div>
</div>
In the controller page, I have code as
(function () {
'use strict';
var myApp = angular.module('app',[]);
myApp.controller('Main', function ($scope) {
$scope.showUpload = false;
$scope.data = {
availableOptions: [
{ id: '1', name: 'Select' },
{ id: '2', name: 'aY1' },
{ id: '3', name: 'aY3' },
{ id: '4', name: 'bA4' }
],
selectedOption: { id: '1', name: 'Select' }
};
$scope.selectEnvironmentChanged = function () {
if ($scope.data.selectedOption !== 'Select') {
vm.showWarning = true;
$scope.showUpload = true;
vm.showEnvironmentMessage = true;
} else {
vm.showWarning = false;
vm.showEnvironmentMessage = false;
$scope.showUpload = false;
}
};
Currently onload of the page the upload button is hidden, but if I select any other item in dropdown the upload button is not showing. Also, I want to show in the "showEnvironmentMessage" as You have selected Option 1, if the user selects ay1, if they choose ay2, then show message as you have selected option 2 in the "showEnvironmentMessage"label.
How to achieve this? Thanks
I am new at angular. I would like that by clicking on the selected radio input, the label turns green. How can I do it?
<div ng-app="myApp">
<div ng-controller="myController">
<div>Which one?</div>
<label class="radio" ng-repeat="eval in evaluators">
<input type="radio" ng-model="cell.evaluator" name="evaluatorOptions" value="{{eval.name}}">{{eval.name}}
</label>
<hr />
<div>You picked: {{cell.evaluator}}</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.cell = {
evaluator: "Guava2"
};
$scope.evaluators = [{
name: "Guava1"
}, {
name: "Guava2"
}];
});
http://jsfiddle.net/77axwybr/
You can use ng-class to dynamically set the class of the label using a method on scope that checks the current value with that set in ng-model.
<style>
.selected {
background: green;
}
</style>
<div ng-app="myApp">
<div ng-controller="myController">
<div>Which one?</div>
<label ng-class="{selected: isSelected(eval.name) }" class="radio" ng-repeat="eval in evaluators">
<input type="radio" ng-model="cell.evaluator" name="evaluatorOptions" value="{{eval.name}}">{{eval.name}}
</label>
<hr />
<div>You picked: {{cell.evaluator}}</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.isSelected = (name) => $scope.cell.evaluator === name;
$scope.cell = {
evaluator: "Guava2"
};
$scope.evaluators = [{
name: "Guava1"
}, {
name: "Guava2"
}];
});
http://jsfiddle.net/vsdvcepn/
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>