使用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>