Изменение текста в приложении 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 быть истинным/ложным значением в моем контроллере. Однако, на мой взгляд, я хочу показать «Вкл.», Если флаг является истинным. Если флаг false, я хочу показать «Выкл.». Как мне это сделать? Я думал, что могу использовать фильтр. Однако мне не повезло с этим подходом.

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