12

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

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

ng-show/ng-hide を使用して、それをブール値の areaStatus に割り当てるだけではなく、on/off/hidden/transparent/whatever などのより複雑なものが必要です。

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

4

2 に答える 2

18

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

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

jsフィドル

しかし、それは非常に醜いです。特に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 }">

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

于 2013-08-28T21:07:32.953 に答える
12

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

<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するだけです。オブジェクトを渡すことができます。andは、適用するクラスです。以下の式が正しい場合に適用されます。booleanareaStatusng-classredgreen

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

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

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

于 2013-08-28T21:01:15.090 に答える