Измените текст кнопки при нажатии angular JS

Ответ 1

Я думаю, использование часов 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';
    })
})

Демо: Fiddle

Ответ 2

Или сохраните весь контент в своем 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>

Ответ 3

Я бы не использовал ни часы, ни ng-show из-за их производительности. Это просто, как это:

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

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

Ответ 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. Вам также необходимо инициализировать enableCaption в JS, где вы создаете пустой объект.