Change Attributes for Dynamically added elements

Question

How can I Change (type) Attribute for dynamically added buttons? In below code, label names were changing perfectly, but when i am trying to change button types it is applying to all added dynamic buttons, My requirement is have to change every button type with different types (means: 1st button to submit, 2nd to reset, 3rd to cancel). but in my code if i change 2nd button type to 'Reset' at the same time the first button type also going to Reset type... can u please tell me how can i change button type for every added element ... ??

Working DEMO

Updated:

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>

can you clean up your code a bit, because it is really hard to read. Otherwise I would add just the index of the button in the call and would store the references in an array, so when you click on the options you could just use the reference to change the type based on the index. — eesdil
– eesdil, Commented Jan 21, 2016 at 9:22

carndacier · Accepted Answer · 2016-01-21 09:50:35Z

Is it what you want ? Working code here

2 things :

Don't set the same ID to different html element. ID must be unique, instead use class.
Bind the type of the button aswell. Then, when you click on one, you can use the double binding of angular very easyly :)

Here the code :

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

Is it what you expected ?

Collectives™ on Stack Overflow

Change Attributes for Dynamically added elements

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related