[英]change the text of the button on click using angular 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;
}
或者,如果您愿意,请保留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>
我认为,使用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';
})
})
演示: 小提琴
由于他们的表现,我既不会使用手表也不会使用ng-show。 这很简单:
app.controller('AppController', function ($scope) {
$scope.toggle = true;
})
<button ng-click="toggle = !toggle">{{toggle && 'Toggle!' || 'some text'}}</button>
这是我的解决方案,支持翻译:
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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.