使用AngularJs从下拉列表中选择特定选项时切换的按钮

时间:2015-10-07 11:14:27

标签: javascript css angularjs html5 drop-down-menu

M陷入Angular Js。当我从下拉列表中选择特定选项时,我想在左侧和中间之间切换按钮。

默认情况下,按钮位于中间位置。我只想在选择"一个"从下拉列表开始,其余选项保持在中间位置。

这是我写过的半生不熟的代码   (的index.html)

<div ng-controller="ButtonsCtrl">

<h4>Radio &amp; 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>

Js文件如下:

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'];});

提前致谢!!!

1 个答案:

答案 0 :(得分:0)

为了实现这一点,我建议在ng-change元素中添加<select>函数,如下所示:

<select ng-model="selectedItem"  ng-change="changeFunction()">

此功能的作用是检查当前所选项目是否等于“1”,如果是,则将$scope.radioModdel设置为“左”。在所有其他情况下,将其设置为“中间”。代码如下:

$scope.changeFunction = function(){
  if(this.selectedItem == 'one')
    $scope.radioModel = 'Left';
  else
    $scope.radioModel = 'Middle';
}

这是一个有效的plnkr

您可以阅读更多关于角度处理documentation上选择元素的方式。

谢谢你,祝你有愉快的一天!