javascript - Change Attributes for Dynamically added elements -
how can change (type) attribute dynamically added buttons? in below code, label names changing perfectly, when trying change button types applying added dynamic buttons, requirement have change every button type different types (means: 1st button submit, 2nd reset, 3rd cancel). in code if change 2nd button type 'reset' @ same time first button type going reset type... can u please tell me how can change button type every added element ... ??
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'); (var = 0, ils = els.length; < 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'); (var = 0, ils = els.length; < 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'); (var = 0, ils = els.length; < 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"> submit <input ng-click="changetoreset(buttonfields['' + counter + ''])" name="submit" type="radio"> reset <input ng-click="changetocancel(buttonfields['' + counter + ''])" name="submit" type="radio"> cancel </div> </form> </body> </html>
is want ? working code here
2 things :
- don't set same id different html element. id must unique, instead use class.
- bind type of button aswell. then, when click on one, can use double binding of angular easyly :)
here 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 expected ?
Comments
Post a Comment