私はng-class
を使って要素のクラスを切り替えようとしています。
<button class="btn">
<i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>
isAutoScroll()を使用しています。
$scope.isAutoScroll = function()
{
$scope.autoScroll = ($scope.autoScroll) ? false : true;
return $scope.autoScroll;
}
基本的には、$scope.autoScroll
が true の場合は ng-class を icon-autoscroll
とし、false の場合は icon-autoscroll-disabled
としたいと考えています。
今あるものはうまくいっておらず、コンソールに次のようなエラーが表示されます。
`Error:Lexer Error:{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}] という式の中で、18~18列目に予期しない次の文字があります。
どうすれば正しくできるでしょうか?
**編集者コメント
解決策1:(古くなっています
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
**エディット2
を解決します。
Stewieさんが提供したSolution 3
が使われるべきものなので、解答を更新したいと思います。これは三項演算子に関しては最も標準的なもので、私にとっても最も読みやすいものです。解決策は以下の通りです。
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
と訳します。
if (autoScroll == true) ?
//use class 'icon-autoscroll' :
//else use 'icon-autoscroll-disabled'
ng-classでのコンディショナルの使い方。
解決策1:
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
解答2:
<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>
解決策3(angular v.1.1.4+で三項演算子のサポートが導入されました)。
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>