更改AngularJS中的文本應用

Question

我正在學習AngularJS。我有一個應用程序與控制器，看起來像下面這樣：

function myController($scope) { 
    $scope.isOn = false; 
    $scope.flip = function() { 
    $scope.isOn = !$scope.isOn; 
    } 
} 

我的觀點有以下代碼：

<div ng-controller="myController"> 
    <button ng-click="flip()">{{isOn}}</button> 
</div> 

我想ISON是在我的控制器中的真/假值。但是，在我看來，如果國旗是真的，我想顯示「開」。如果該標誌爲假，我想顯示「關」。我怎麼做？我以爲我可以使用過濾器。但是，我沒有這種方法的運氣。

Answer 1

可以使用?:操作

<div ng-controller="myController"> 
    <button ng-click="flip()">{{isOn?"On":"Off"}}</button> 
</div> 

只需驗證您的Anugular版本支持。

Answer 2

使用芒差三元運算符：

<div ng-controller = "fessCntrl"> 
    <button ng-click="flip()">{{(isOn) && 'On' || 'Off'}}</button> 
</div> 

演示1 Fiddle

或（從angularjs> 1.1.5）

<div ng-controller="ctrlRead"> 
    <button ng-click="flip()">{{isOn ? 'On' : 'Off'}}</button> 
</div> 

演示2 Fiddle

Answer 3

你也可以去filter（雖然可能不值得）。這樣，你會碰到這樣的：

<div ng-controller="myController"> 
    <button ng-click="flip()">{{isOn | toggleFilter}}</button> 
</div> 

Answer 4

另一種方法是做邏輯控制器

HTML模板：

<div ng-controller="myController"> 
    <button ng-click="flip()">{{isOnLabel}}</button> 
</div> 

控制器：

function myController($scope) { 
    var isOn = false; 
    $scope.isOnLabel= 'Off'; 
    $scope.flip = function() { 
     isOn = !isOn; 
     $scope.isOnLabel = isOn?'On':'Off'; 
    }; 
}; 

如果你需要isOn在$ scope然後在控制器更改isOn $ scope.isOn

function myController($scope) { 
    $scope.isOn = false; 
    $scope.isOnLabel= 'Off'; 
    $scope.flip = function() { 
     $scope.isOn = !$scope.isOn; 
     $scope.isOnLabel = $scope.isOn?'On':'Off'; 
    }; 
}; 

jsFiddle demo