多状态按钮,如在angularJS中切换

Question

我想在表中实现一个功能,用户可以通过单击它来设置单元格的值.可以说3-4个状态,也是附加到它的ng模型.

我在angularjs中查找了切换按钮,但它们仅仅是开/关类型.

简而言之; 单击该按钮将值设置为:活动,非活动,排除寻找具有多个状态的解决方案.任何帮助都非常感谢.

Answer 1

检查以下工作示例:

http://jsfiddle.net/vishalvasani/ZavXw/9/

和控制器代码

function MyCtrl($scope) {

    $scope.btnarr=0;
    $scope.btnTxt=["Active","Inactive","Excluded"]
    $scope.change=function(){
        switch($scope.btnarr)
        {
            case 0:
                $scope.btnarr=1;
               break;
            case 1:
                 $scope.btnarr=2
               break;
            case 2:
                 $scope.btnarr=0;
               break;                
        }
    }
}

要么

更短版本的控制器

function MyCtrl($scope) {

    $scope.btnarr=0;
    $scope.btnTxt=["Active","Inactive","Excluded"]
    $scope.change=function(){
      $scope.btnarr = ($scope.btnarr + 1) % $scope.btnTxt.length;
    }
}

和HTML

<div ng-controller="MyCtrl">
    <button ng-modle="btnarr" ng-Click="change()">{{btnTxt[btnarr]}}</button>
</div>