如何使用angular js动态更改按钮的名称
[英]How to change the name on a button dynamically using angular js
问题描述
my code: 
我的代码：
<button id="btnajs" ng-click="AppendText()">Using angularjs</button>
<div id="divID"></div>
<script>
var count=1;
function myCtrl($scope) {
$scope.AppendText = function() {
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append("<tr><td><button type='submit' name='id_"+count+"' class='newbtn' id='"+count+"' data-toggle='modal' data-target='#mymodal'>{{bn}}</button></td></tr>");
count++;
}
}
var myapp=angular.module("myapp",[]);
myapp.controller('btncontrol',function($scope){
$scope.bn="Save data";
$scope.save=function(){
$scope.bn= "Saving data...";
};
});
</script>
The button "angular js" is to be clicked and then more buttons are appended below it.. i want to be able to change the names of those appended buttons to "save data" and after clicking on the same button change to "saving data..", but it only appears as {{bn}}. 单击“ Angular js”按钮，然后在其下方附加更多按钮。.我希望能够将那些附加按钮的名称更改为“保存数据”，然后单击同一按钮后更改为“保存数据” ..”，但仅显示为{{bn}}。 I have added all the necessary libraries. 我已经添加了所有必需的库。
3 个解决方案
解决方案1
1 2017-01-30 11:32:55
How about something like that 这样的事情怎么样
var app = angular.module('my-app', [], function() {}); app.controller('AppController', function($scope) { $scope.toggle = true; })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app" ng-controller="AppController"> <button ng-click="toggle = !toggle"> <span ng-show="toggle">Save Data</span> <span ng-hide="toggle">Saving Data</span> </button> </div>
解决方案2
0 2017-01-30 11:20:08
You do not have to use jquery way, 您不必使用jquery方式，
Just change the scope variable on button click using function. 只需使用功能更改单击按钮时的作用域变量。
$scope.AppendText = function(){
$scope.bn = "saving data";
}
DEMO 演示
var app = angular.module('todoApp', []); app.controller("dobController", ["$scope", function($scope) { $scope.bn = "Save data"; $scope.AppendText = function(){ $scope.bn = "saving data"; } } ]);
<!DOCTYPE html> <html ng-app="todoApp"> <head> <title>To Do List</title> <link href="skeleton.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> </head> <body ng-controller="dobController"> <button ng-click="AppendText()"> {{bn}}</button> </body> </html>
解决方案3
0 2017-01-30 11:43:05
No need to use $scope.save in this code. 无需在此代码中使用$ scope.save。 Also write the html part seperate. 还要单独编写html部分。 if you want to code exactly as yours. 如果您想完全按照自己的方式编写代码。 please call save() in myEl.append. 请在myEl.append中调用save（）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.