2017-01-30 50 views
0

我的代碼:如何更改名稱上的一個按鈕使用動態的角度JS

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

按鈕「角JS」是被點擊,然後更多的按鈕被附加在它下面。我希望能夠將這些附加按鈕 的名稱更改爲「保存數據」,點擊同一按鈕後,更改爲「保存數據..」,但只顯示爲{{bn}}。 我已經添加了所有必需的庫。

+0

對不起..我想我沒有正確解釋我的問題。我做了幾個編輯..解釋我想要什麼.. –

回答

0

您不必使用jQuery的方式,

使用功能只是改變按鈕點擊範圍變量。

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

1

如何類似的東西

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>

0

在此代碼中不需要使用$ scope.save。另外寫html部分分開。如果你想完全按照你的代碼進行編碼。請在myEl.append中調用save()。