M stuck in Angular Js. I want to toggle the button between left and middle when I select a specific option from the dropdown.
By default the button is at middle. I want to toggle it to left only when I select "one" from the dropdown and remain at middle for the rest of the options.
This is the half baked code I have written (Index.html)
<div ng-controller="ButtonsCtrl">
<h4>Radio & Uncheckable Radio</h4>
<select ng-model="selectedItem">
<option ng-repeat="item in items" value="{{item}}">{{item}}</option>
</select>
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
</div>
The Js file is as follows:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function($scope){ $scope.radioModel = 'Middle';$scope.items = ['one','two','three','four'];});
Thanks in advance!!!
In order to achieve that, I would suggest adding an ng-change
function to the <select>
element, like so :
<select ng-model="selectedItem" ng-change="changeFunction()">
What this function does, is to check if the current selected item is equal to "one" and if so, set the $scope.radioModdel
to "Left". In all other cases, set it to "Middle". The code is below:
$scope.changeFunction = function(){
if(this.selectedItem == 'one')
$scope.radioModel = 'Left';
else
$scope.radioModel = 'Middle';
}
Here is a working plnkr .
You could read more about the way angular handles select elements on their documentation .
Thank you and have a nice day!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.