web-dev-qa-db-ja.com

AngularJS内のブール値True / Falseのような2つの文字列値を切り替える方法は？

ボタンがあります。クリックすると、一部の領域が表示/非表示になります。

button(ng-click="areaStatus='on'")
.area(ng-class="areaStatus")

単にng-show/ng-hideを使用してそれをブールareaStatusに割り当てたいのではなく、on/off/hidden/transparent/whateverのようなより複雑なものを望んでいます。

インライン式を使用するだけで、関数の記述を必要とせずに、クリック時にareaStatusを 'on'と 'off'の間で切り替える方法はありますか？

javascriptangularjspug
12
Sergei Basharov

これを行うことができます（HTML）：

<button ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</button>

jsFiddle

しかし、それは非常に醜いです。特に2つの値を切り替えるだけの場合よりも複雑な場合は、スコープ上で状態を変更するメソッドを作成することは間違いありません。

ただし、areaStatusがエリアクラスを変更するだけの場合は、それを削除し、モデルの状態に応じてクラスを変更する必要があると思います。このようなもの：

function Ctrl($scope) {
    $scope.state = 'on';

    $scope.changeState = function() {
        $scope.state = $scope.state === 'on' ? 'off' : 'on';
    }
}

...

<area ng-class="{'on': state, 'off': !state }">

私は「オン」と「オフ」を使用しましたが、モデルに意味のある値である必要があります。

18
Michael Benford

あなたが何を望んでいるのか、なぜあなたが関数を望んでいるのを避けているのかは明確ではありませんが、私があなたがやりたいと思うことを実行する方法は次のとおりです：

<button ng-click="areaStatus = !areaStatus">Toggle</button>
<div ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
    This is some text
</div>

以下は それを示すフィドル と以下のコードスニペットです。

var myModule = angular.module('myModule', []);

myModule.controller('myController', function ($scope) {

    $scope.areaStatus = false;
});
.red {
    color:red;
}
.green {
    color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app="myModule">
    <div ng-controller="myController">
        <button ng-click="areaStatus = !areaStatus">Toggle</button>
        <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
            This is some text
        </div>
    </div>
</div>

ng-click内では、booleanのareaStatusの値を反転するだけです。 ng-classを使用すると、オブジェクトを渡すことができます。 redおよびgreenは、適用するクラスになります。以下の表現が正しい場合に適用されます。

別の方法は、クラス内でAngularの{{ }}を使用することです。

<div class="{{areaStatus}}">   </div>

したがって、areaStatusに文字列"hidden"が含まれている場合、そこにクラスが配置されます。ただし、areaStatusの値を（関数、複数のボタン、またはチェックボックスのいずれかで）変更する方法が必要です。

12
EnigmaRM