2016-01-14 2 views
0

Как настроить атрибут типа для каждой добавленной динамической кнопки? В приведенном ниже коде имена ярлыков менялись отлично, а также я мог установить «атрибут типа» на первую добавленную кнопку, но остальные типы кнопок не меняются должным образом .. может у вас проверить это и решить это мне PLS ..Установить атрибут для динамического добавления каждого элемента

Working DEMO

Обновлено:

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> 
 
\t <div id="add"></div> 
 
\t <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> 
 
\t </form> 
 
    </body> 
 

 
</html>

+0

@TrueBlueAussie Привет .. я обновил свой код .. –

+0

извините @TrueBlueAussie .. я удалил .. :) –

ответ

0

Вы выбираете "все кнопки" с помощью document.getElementById("button_Type"). В этом проблема: getElementById возвращает первый элемент, который может найти с данным идентификатором.

Попробуйте вместо этого использовать document.querySelectorAll(), который всегда будет возвращать массив.

+0

Но я хочу добавить разные типы attr для каждой кнопки, я хочу установить первую кнопку 'type «Отправить», вторая кнопка «Тип для сброса» .. если я использую ** document.querySelectorAll() **, показывая ошибку как _Нет достаточно аргументов для Document.querySelectorAll_ .. как решить это, можете ли вы попробовать это для меня PLS ? –

+0

Основная проблема, с которой вы сталкиваетесь, - «как выбрать правильные элементы»? Я могу только посоветовать вам догнать основы селекторов CSS. Я рекомендую прочитать эту статью, например: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started Кроме того: в вашем примере вы НЕ должны добавлять один и тот же идентификатор к каждой кнопке в качестве атрибут id должен быть уникальным. Попробуйте использовать классы и, конечно же, при использовании document.querySelectorAll() вам необходимо передать правильный селектор в качестве аргумента. – NicBright

+0

Спасибо @NicBright –

Смежные вопросы