使用angular JS更改單擊按鈕的文本

Question

如何在單擊按鈕時更改按鈕的文本。

這是我嘗試過的。

HTML：

<button ng-click="toggle = !toggle">Toggle!</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>

JS：

function MainController($scope) {
  $scope.toggle = true;
}

Answer 1

或者，如果您願意，請保留HTML中的所有內容，而不是在控制器中定義按鈕文本：

<button ng-click="toggle = !toggle">
    <span ng-show="toggle">Toggle to Off</span>
    <span ng-hide="toggle">Toggle to On</span>
</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>

Answer 2

我認為，使用toggle手表應該這樣做

<button ng-click="toggle = !toggle">{{toggleText}}</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>

然后

app.controller('AppController', function ($scope) {
    $scope.toggle = true;

    $scope.$watch('toggle', function(){
        $scope.toggleText = $scope.toggle ? 'Toggle!' : 'some text';
    })
})

演示： 小提琴

Answer 3

由於他們的表現，我既不會使用手表也不會使用ng-show。 這很簡單：

app.controller('AppController', function ($scope) {
    $scope.toggle = true;
})

<button ng-click="toggle = !toggle">{{toggle && 'Toggle!' || 'some text'}}</button>

Answer 4

這是我的解決方案，支持翻譯：

HTML：

<span class="togglebutton">
    <label>
        <input type="checkbox" checked="{{myApp.enabled}}"
               ng-model="myApp.enabled" ng-click="toggleEnabled()">
        <span translate="{{myApp.enableCaption}}">Is Enabled?</span>
    </label>
</span>

JS - 控制器：

$scope.toggleEnabled = function() {
    $scope.myApp.enableCaption = $scope.myApp.enabled ? 'global.enabled' : 'global.disabled';
};

global.enabled和global.disabled引用i18n JSON轉換。 您還需要在創建空對象的位置初始化JS中的enableCaption 。