更改單擊使用角度按鈕上的文本JS

這裏是我試過的。

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; 
}

來源

2014-06-20 user1853128

我認爲，使用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

來源

2014-06-20 05:02:19

或者，把所有的內容在你的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>

來源

2014-06-20 05:08:41 StephenT

在我看來，這可能是更正確的做法，因爲文本更改是純粹與用戶界面相關的事情。最好的做法是在控制器之外嘗試保留任何與UI相關的嚴格代碼，最好是在模板中或指令中。 –

我會用沒有手錶也沒有NG-顯示，因爲的表現。說起來很簡單，因爲這：

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

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

來源

2015-10-31 15:57:37 akcasoy

謝謝@akcasoy。這是更簡單和最好的解決方案。 – Kishori

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

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，以創建空對象。

來源

2016-01-02 23:02:35

更改單擊使用角度按鈕上的文本JS

回答

相關問題