更改動態添加元素的屬性

如何更改（類型）動態添加按鈕的屬性？在下面的代碼中，標籤名稱完全改變，但是當我嘗試更改按鈕類型時，它將應用於所有添加的動態按鈕，我的要求是必須更改每種按鈕類型的不同類型（表示：要提交的第一個按鈕，第二個重置，第三次取消）。但在我的代碼，如果我更改第二個按鈕類型爲'重置'在同一時間第一個按鈕類型也將重置類型...可以ü請告訴我如何更改每個添加元素的按鈕類型...？更改動態添加元素的屬性

Working DEMO

更新時間：

var app = angular.module('myapp', ['ngSanitize']); 
 

 
app.controller('ButtonCtrl', function($scope, $compile) { 
 
    var counter = 0; 
 
     $scope.buttonFields = []; 
 

 
    $scope.add_Button = function(index) { 
 
    $scope.buttonFields[counter] = {button: 'Submit'}; 
 
     var buttonhtml = '<div ng-click="selectButton(buttonFields[\'' + counter + '\'])"><button id="button_Type">{{buttonFields[' + counter + '].button}}</button>//click//</div>'; 
 

 
     var button = $compile(buttonhtml)($scope); 
 
     angular.element(document.getElementById('add')).append(button); 
 

 
    $scope.changeTosubmit = function (val) { 
 
     $scope.buttonField = val; 
 
     var els = document.body.querySelectorAll('#button_Type'); 
 
     for (var i = 0, ils = els.length; i < ils; i++) { 
 
      var el = els[i]; 
 
      el.setAttribute("type", "submit"); 
 
      compile(el); 
 
     } 
 
    }; 
 
    $scope.changeToreset = function (val) { 
 
     $scope.buttonField = val; 
 
     var els = document.body.querySelectorAll('#button_Type'); 
 
     for (var i = 0, ils = els.length; i < ils; i++) { 
 
      var el = els[i]; 
 
      el.setAttribute("type", "reset"); 
 
      compile(el); 
 
     } 
 
    }; 
 
    $scope.changeTocancel = function (val) { 
 
     $scope.buttonField = val; 
 
     var els = document.body.querySelectorAll('#button_Type'); 
 
     for (var i = 0, ils = els.length; i < ils; i++) { 
 
      var el = els[i]; 
 
      el.setAttribute("type", "cancel"); 
 
      compile(el); 
 
     } 
 
    }; 
 
     ++counter; 
 
    }; 
 

 
    $scope.selectButton = function (val) { 
 
     $scope.buttonField = val; 
 
$scope.showButton_Types = true; 
 
    }; 
 
    
 
}); 
 
function compile(element) { 
 
var el = angular.element(element); 
 
$scope = el.scope(); 
 
$injector = el.injector(); 
 
$injector.invoke(function ($compile) { 
 
    $compile(el)($scope); 
 
}); 
 
};

<!DOCTYPE html> 
 
<html ng-app="myapp"> 
 

 
    <head> 
 
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
    <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script> 
 

 
    </head> 
 

 
    <body ng-controller="ButtonCtrl"> 
 
    <button ng-click="add_Button($index)">Add Buttons</button> 
 
<hr> 
 
\t <div id="add"></div> 
 
\t <form ng-show="showButton_Types"> 
 
     <div> 
 
     <label>Button Name(?)</label><br/>  
 
     <input ng-model="buttonField.button"> 
 
     </div> 
 
     <div>    
 
     <label>change button types(?)</label><br/> 
 
<input ng-click="changeTosubmit(buttonFields['' + counter + ''])" name="submit" type="radio">&nbsp;Submit 
 
    <input ng-click="changeToreset(buttonFields['' + counter + ''])" name="submit" type="radio">&nbsp;Reset 
 
    <input ng-click="changeTocancel(buttonFields['' + counter + ''])" name="submit" type="radio">&nbsp;Cancel 
 
     </div> 
 
\t </form> 
 
    </body> 
 

 
</html>

來源

2016-01-21 vijay

你能清理一下你的代碼，因爲它真的很難閱讀。否則，我只會在調用中添加按鈕的索引，並將引用存儲在數組中，所以當您單擊選項時，您可以使用引用來根據索引更改類型。 – eesdil

難道你想要什麼？ Working code here

兩件事：

不要設置相同的ID，以不同的HTML元素。 ID必須是唯一的，而不是使用類。
也綁定按鈕的類型。那麼，當你點擊一個，你可以使用的角度雙重結合非常easyly :)

下面的代碼：

var app = angular.module('myapp', ['ngSanitize']); 

app.controller('MainCtrl', function($scope, $compile) { 
    var counter = 0; 
    $scope.buttonFields = []; 

    $scope.add_Button = function() { 
    $scope.buttonFields[counter] = {button: 'Submit', type: ''}; 
     var buttonhtml = '<div ng-click="selectButton(buttonFields[\'' + counter + '\'])"><button id="button_Type' + $scope.counter + '" type="{{buttonFields[' + counter + '].type}}">{{buttonFields[' + counter + '].button}}</button>//click//</div>'; 
     var button = $compile(buttonhtml)($scope); 
     angular.element(document.getElementById('add')).append(button); 

     $scope.changeTosubmit = function() { 
      $scope.buttonField.type = 'submit'; 
     } 

    $scope.changeToreset = function() { 
      $scope.buttonField.type = 'reset'; 
    }; 
    $scope.changeTocancel = function() { 
      $scope.buttonField.type = 'cancel'; 
    }; 
     ++counter; 
    }; 

    $scope.selectButton = function (val) { 
     $scope.buttonField = val; 
     $scope.showButton_Types = true; 
    }; 

}); 
    function compile(element) { 
    var el = angular.element(element); 
    $scope = el.scope(); 
    $injector = el.injector(); 
    $injector.invoke(function ($compile) { 
     $compile(el)($scope); 
    }); 
};

它是你的預期？

來源

2016-01-21 09:50:35 carndacier

:)是的正確..謝謝你soo ..：D – vijay

更改動態添加元素的屬性

回答

相關問題