Question

如何为每个添加的动态按钮设置'type attribute'？在下面的代码中，标签名称正在发生变化，而且我还能够将'type属性'设置为第一个添加的按钮，但其余的按钮类型没有正确更改..请你检查一下并解决这个问题。

更新

var app = angular.module('myapp', ['ngSanitize']);

app.controller('MainCtrl', 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 () {
            var el = document.getElementById("button_Type");
            el.setAttribute("type", "submit");
            compile(el);
        };
        $scope.changeToreset = function () {
            var el = document.getElementById("button_Type");
            el.setAttribute("type", "reset");
            compile(el);
        };
        $scope.changeTocancel = function () {
            var el = document.getElementById("button_Type");
            el.setAttribute("type", "cancel");
            compile(el);
        };
        ++counter;
    };

    $scope.selectButton = function (val) {
        $scope.buttonField = val;
$scope.showButton_Types = true;
    };
  
});

<!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="MainCtrl">
    <button ng-click="add_Button($index)">Add Buttons</button>
<hr>
	<div id="add"></div>
	<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()" name="submit" type="radio">&nbsp;Submit
        <input ng-click="changeToreset()" name="submit" type="radio">&nbsp;Reset
        <input ng-click="changeTocancel()" name="submit" type="radio">&nbsp;Cancel
      </div>
	</form>
  </body>

</html>

Answer 1

您正在选择＆＃34;所有按钮＆＃34;通过document.getElementById("button_Type")。这就是问题：getElementById返回它可以找到的具有给定ID的第一个项目。

尝试使用document.querySelectorAll（）（它将始终返回一个数组）。

设置动态添加每个元素的属性

1 个答案: