Should be simple - what am I doing incorrectly?
In my controller:
$scope.eventShow = {tab: 'stations'};
and, in a view:
Show:
<span>
<label>Stations</label>
<input type="radio" ng-model="eventShow.tab" value="stations" class="check_box" />
</span>
<span>
<label>Visitors</label>
<input type="radio" ng-model="eventShow.tab" value="visitors" class="check_box" />
</span>
I want the radio buttons to toggle, when one is clicked, and $scope.eventShow.tab to be updated appropriately
Your code is working correctly for me. what version of angular are you using? I am using this:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
or is it possible you do not have ng-controller in the html?
Related
I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.
I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.
<div class="radio-button"
ng-show="vm.forAdmins"
ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)" >
{{role.name}}
</div>
Been wrestling with this for a while now, can't see what I've missed.
Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.
<div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)"
name="roles" >
{{role.name}}
</div>
Try assigning a name attribute to your radio button. name groups the radio button. For example :
<input type="radio" name="someRadio" id="radioOne" />
<input type="radio" name="someRadio" id="radioTwo" />
Now only one is selected at a time.
So, I have two toggle buttons, the user must be able only to select one of the above two toggle buttons as show in the image below:
How can I achieve this ?
You can use Radio buttons : http://ionicframework.com/docs/v1/components/#radio-buttons
But if you want to use toggle button and achieve this thing, you can use $watch : Documentation
Ionic code:
<label class="toggle">Bride only
<input type="checkbox" ng-model="B">
<div class="track">
<div class="handle"></div>
</div>
</label>
<br>
<label class="toggle">Bride & Bridesmaids
<input type="checkbox" ng-model="B&B">
<div class="track">
<div class="handle"></div>
</div>
</label>
Angular code:
$scope.B=false; // for Bride only
$scope.B&b= false //for Bride and Bridesmaids
$scope.$watch('B',function(){
if($scope.B==true){
$scope.B&B=false;
console.log($scope.B&B);
}
});
$scope.$watch('B&B',function(){
if($scope.B&B==true){
$scope.B=false;
console.log($scope.B);
}
});
Hope this helps.
How do I get the proper radio button to be checked according to the value of fc.confidence when the template is first loaded?
The code below selects neither radio even though the value of fc.confidence is None
div.container-fixture(ng-repeat="fc in fixtureConfidences")
div.item-confidence
div {{ fc.gsm_id }}
div
label None
input(type="radio" name="confidence_radiogroup" value="None" ng-model="fc.confidence")
label Low
input(type="radio" name="confidence_radiogroup" value="Low" ng-model="fc.confidence")
Part of your problem is that you are sharing the radio group name across all the items in your repeat. When you omit the name, AngularJS will group them by scope and give it a name dynamically.
Here is how it would look (in HTML):
<div class="container-fixture" ng-repeat="fc in fixtureConfidences">
<div class="item-confidence">
<div>
{{ fc.gsm_id }}
</div>
<div>
<label>None
<input type="radio" value="None" ng-model="fc.confidence" />
</label>
<label>Low
<input type="radio" value="Low" ng-model="fc.confidence" />
</label>
</div>
</div>
</div>
<pre>{{fixtureConfidences | json}}</pre>
Here is a working plunker: http://plnkr.co/edit/nc2Xx2hvCE7iOnlC4i5R
can we change URL when radio button selected. I am using angularjs?
following is my code and I want to change url when input radiobox is selected
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">
Automatically
</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">
Manually
</label>
<span class="switch-selection">
</span>
</div>
In AngularJS, you can use the $location service to change path as:
$location.path('/new-route');
On your input tag, you can then use the ng-change or the ng-click directives to call a function that will change the route. So, it can be something like this:
<input type="radio" ng-click="changeLocation('route-name')>
With your controller having the following code:
$scope.changeLocation = function (newRoute) {
$location.path(newRoute);
};
I'm using ng-repeat to generate a bunch of radiobuttons.
<div class="radiobutton" ng-repeat="mylabel in field.labels">
<input
type="radio"
name="{{field['key']}}"
value="{{mylabel.label}}"
id="{{mylabel.name}}"
>
<label for="{{field['key']}}">
{{mylabel.label}}
</label>
</div>
I would like to add a class to the input-element based on if the input-element is checked or not, using angluar. As far as I can understand I should apply a ng-model to the element and then use that to declare a ng-class, but how do I make it so that each input get's it's own model-name?
try:
<div class="radiobutton" ng-repeat="mylabel in field.labels">
<input
type="radio"
name="{{field['key']}}"
value="{{mylabel.label}}"
id="{{mylabel.name}}"
ng-model='$parent.my_radio_button'
ng-class='{ class_name: (my_radio_button == mylabel.label) }'
>
<label for="{{field['key']}}">
{{mylabel.label}}
</label>
</div>
Since you use radio buttons, I guess only one can be selected, so you can share the same ng model.