設置屬性動態添加每個元素

如何爲每個添加的動態按鈕設置'type屬性'？在下面的代碼中，標籤名稱完全改變，而且我可以設置'type屬性'爲第一次添加按鈕，但其餘按鈕類型沒有正確更改..可以檢查出來並解決這個問題..設置屬性動態添加每個元素

更新時間：

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>

來源

2016-01-14 Vijju Sena

@TrueBlueAussie嗨..我更新了我的代碼.. –

對不起@TrueBlueAussie ..我沒有刪除.. :) –

您要通過document.getElementById("button_Type")選擇「所有按鈕」。這是問題：getElementById返回它可以找到的第一個項目與給定的ID。

嘗試使用document.querySelectorAll（）來代替（它將始終返回一個數組）。

來源

2016-01-14 12:20:54 NicBright

但我想添加不同類型的attr到每個按鈕,,我想設置第一個按鈕的類型提交'，第二個按鈕'鍵入重置'..如果我使用** document.querySelectorAll（）**顯示錯誤，因爲_沒有足夠的參數到Document.querySelectorAll_ ..如何解決這個問題，你可以試試這個對我來說？ –

您面臨的核心問題是「如何選擇正確的元素」？我只能建議你跟上CSS選擇器的基礎知識。我推薦閱讀這篇文章，例如：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started 除此之外：在你的例子中，你不應該添加相同的id到每個按鈕id屬性應該是唯一的。嘗試使用類，當然，在使用document.querySelectorAll（）時，您需要傳遞適當的選擇器作爲參數。 – NicBright

謝謝@NicBright –

設置屬性動態添加每個元素

回答

相關問題