Question

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

Working DEMO

更新

＆＃13;

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

＆＃13;

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

＆＃13;

更改不同类型的属性以动态添加每个元素

0 个答案: