Question

如何更改（键入）动态添加按钮的属性？在下面的代码中，标签名称变化很好，但是当我尝试更改按钮类型时，它适用于所有添加的动态按钮，我的要求是必须改变不同类型的每个按钮类型（意味着：第一个按钮提交，第二个重置，第三个取消）。但在我的代码中如果我将第二个按钮类型更改为'重置'同时第一个按钮类型也将重置类型...请你告诉我如何更改每个添加元素的按钮类型... ??

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>
	<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(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>
	</form>
  </body>

</html>

Answer 1

这是你想要的吗？ Working code here

2件事：

不要将相同的ID设置为不同的html元素。 ID必须是唯一的，而不是使用class。
绑定按钮的类型。然后，当你点击一个时，你可以很容易地使用角度的双重绑定：）

这里是代码：

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);
    });
};

这是你所期望的吗？

更改动态添加元素的属性

1 个答案: