單擊Angularjs中的保存按鈕時如何從動態創建的輸入文本框中獲取數據

Question

我正在為每個項目動態創建文本框和保存按鈕，單擊保存按鈕后，我需要從該特定項目的文本框中獲取值。

 for (let d = 0; d <= ItemsInfo.length - 1; d++)
    {                 
           content += '<tr>  <td> <label for="lblPriority">Item Priority </label>  </td>  ';
           content += ' <td>   <input type="text" id="inpItemPRIORITY" ng-model="prty" value=" ' +  ItemsInfo[d].PRIORITY  + ' " /> </td> </tr>';
           content += '<tr>  <td>  <label for="lblItemComment">Item Comment</label></td> ';
           content += ' <td>   <input type="text" id="inpItemCOMMENT"  ng-model="cmnt"  value=" ' + ItemsInfo[d].COMMENT + ' " /> </td> </tr>';
            // Save Item
          content += '<tr>  <td>  <button class="get-data" ng-click="buttonClick(prty,cmnt)">Save Item(' + ItemsInfo[d].ITEM_ID + ')</button> </td> </tr> ';
  }

在控制器中：

 $scope.buttonClick = function (prty,cmnt) {
  console.log(prty + " " + cmnt); } // console.log displays as undefined undefined

還是有更好的方法來做到這一點？

Answer 1

首先，正確的AngularJs應該是直接在HTML模板中使用ngRepeat ，但是我仍然會為您提供當前代碼的解決方案：

首先，HTML ID應該是唯一的，您正在控制器中的數組上手動循環，因此您可以在ID中添加索引號，並將其賦予函數以查找元素（還修復了for循環條件以進行優化） ）：

在這種情況下，綁定到模型是沒有用的，否則所有輸入將使用相同的作用域變量。 此代碼還顯示了在AngularJS中以jQlite格式檢索DOM元素的正確方法：

for (let d = 0; d < ItemsInfo.length; d++)
{                 
    content += '<tr>  <td> <label for="lblPriority">Item Priority </label>  </td>  ';
    content += ' <td>   <input type="text" id="inpItemPRIORITY_' + d + '" value="' +  ItemsInfo[d].PRIORITY  + '" /> </td> </tr>';
    content += '<tr>  <td>  <label for="lblItemComment">Item Comment</label></td> ';
    content += ' <td>   <input type="text" id="inpItemCOMMENT_' + d + '"  value="' + ItemsInfo[d].COMMENT + '" /> </td> </tr>';
    // Save Item
    content += '<tr>  <td>  <button class="get-data" ng-click="buttonClick(' + d + ')">Save Item(' + ItemsInfo[d].ITEM_ID + ')</button> </td> </tr> ';
}

$scope.buttonClick = function (index) {
    let prty = angular.element( document.querySelector( '#inpItemPRIORITY_' + index ) ),
        cmnt = angular.element( document.querySelector( '#inpItemCOMMENT_' + index ) );
    console.log(prty.val() + " " + cmnt.val());
};

這是一個演示片段。 只是一個顯示其工作原理的示例（編輯：添加了$compile指令， buttonClick才能正常工作）。

 angular.module('selectExample', []) .controller('ExampleController', ['$scope', function($scope) { const ItemsInfo = [ { ITEM_ID: 'a1', COMMENT: 'comment a1', PRIORITY: 0 }, { ITEM_ID: 'b1', COMMENT: 'comment b1', PRIORITY: 1 }, { ITEM_ID: 'c1', COMMENT: 'comment c1', PRIORITY: 2 }, ]; let content = ''; for (let d = 0; d < ItemsInfo.length; d++) { content += '<tr> <td> <label for="lblPriority">Item Priority </label> </td> '; content += ' <td> <input type="text" id="inpItemPRIORITY_' + d + '" value=" ' + ItemsInfo[d].PRIORITY + ' " /> </td> </tr>'; content += '<tr> <td> <label for="lblItemComment">Item Comment</label></td> '; content += ' <td> <input type="text" id="inpItemCOMMENT_' + d + '" value=" ' + ItemsInfo[d].COMMENT + ' " /> </td> </tr>'; // Save Item content += '<tr> <td> <button class="get-data" ng-click="buttonClick(' + d + ')">Save Item(' + ItemsInfo[d].ITEM_ID + ')</button> </td> </tr> '; } $scope.htmlContent = content; $scope.buttonClick = function (index) { let prty = angular.element( document.querySelector( '#inpItemPRIORITY_' + index ) ), cmnt = angular.element( document.querySelector( '#inpItemCOMMENT_' + index ) ); console.log(prty.val() + " " + cmnt.val()); }; }]) .directive('bindHtmlCompile', ['$compile', function ($compile) { return { restrict: 'A', link: function (scope, element, attrs) { scope.$watch(function () { return scope.$eval(attrs.bindHtmlCompile); }, function (value) { element.html(value); $compile(element.contents())(scope); }); } }; }]); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-sanitize.min.js"></script> <div ng-app="selectExample" ng-controller="ExampleController"> <table bind-html-compile="htmlContent"></table> </div>