javascript - angularJSのトグルのようなマルチステートボタン

Question

ユーザーがセルをクリックしてセルの値を設定できる機能をテーブルに実装したいと考えています。3 ～ 4 の状態があり、それに ng-model が接続されています。

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>

Answer 2

それほど多くはありません。

Angular でメニューを作成すると、各項目に「選択」機能があり、リストから特定のオブジェクトを選択します...

反復可能なボタンを作成すると、さらにスムーズになります。

var i = 0;
$scope.states[
    { text : "Active" },
    { text : "Inactive" },
    { text : "Excluded" }
];

$scope.currentState = $scope.states[i];

$scope.cycleState = function () {
    i = (i + 1) % $scope.states.length;
    $scope.currentState = $scope.states[i];
    // notify services here, et cetera
}


<button ng-click="cycleState">{{currentState.text}}</button>

$scope状態の実際の配列は、ここでこれらのオブジェクトを使用していた唯一の場所である場合、ここの一部である必要さえありませ$scopeんcurrentState。メソッドを呼び出しますcycleState。