Question

我的代码：

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

点击按钮“angular js”，然后在它下面附加更多按钮..我希望能够更改那些附加按钮的名称 “保存数据”，点击相同的按钮后更改为“保存数据..”，但它只显示为{{bn}}。我添加了所有必要的库。

Answer 1

这样的事情

＆＃13;

var app = angular.module('my-app', [], function() {});
app.controller('AppController', function($scope) {
  $scope.toggle = true;
})

＆＃13;

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

＆＃13;

Answer 2

您不必使用jquery方式，

只需使用函数更改按钮单击时的范围变量。

 $scope.AppendText = function(){
     $scope.bn = "saving data";
 }

样本

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>

Answer 3

此代码中无需使用$ scope.save。另外写单独的html部分。如果你想完全像你的代码。请在myEl.append中调用save（）。

如何使用角度js动态更改按钮上的名称

3 个答案: