更改动态添加元素的属性

问题描述：

如何更改（类型）动态添加按钮的属性？在下面的代码中，标签名称完全改变，但是当我尝试更改按钮类型时，它将应用于所有添加的动态按钮，我的要求是必须更改每种按钮类型的不同类型（表示：要提交的第一个按钮，第二个重置，第三次取消）。但在我的代码，如果我更改第二个按钮类型为'重置'在同一时间第一个按钮类型也将重置类型...可以ü请告诉我如何更改每个添加元素的按钮类型...？更改动态添加元素的属性

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>

你能清理一下你的代码，因为它真的很难阅读。否则，我只会在调用中添加按钮的索引，并将引用存储在数组中，所以当您单击选项时，您可以使用引用来根据索引更改类型。 – 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); 
    }); 
};

它是你的预期？

:)是的正确..谢谢你soo ..：D – vijay

更改动态添加元素的属性

相关推荐