Javascript 如何在Angularjs中单击save按钮从动态创建的输入文本框中获取数据

我正在为每个项目动态创建文本框和保存按钮，单击保存按钮，我需要从该特定项目的文本框中获取值

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

---

或者有更好的方法吗？

首先，正确的AngularJs应该直接在HTML模板中使用，但我仍在为您提供当前代码的解决方案：

首先，HTML id应该是唯一的，您正在控制器中的数组上手动循环，因此您可以向id添加一个索引号，并将其交给您的函数以查找元素（还修复了用于优化的for-loop条件）：

在这种情况下，绑定到模型是无用的，否则所有输入将使用相同的范围变量。这段代码还显示了在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> ';
}

这里有一个片段演示。仅举一个例子来说明它的工作原理（编辑：为

按钮添加
$compile
指令单击
以正常工作）


angular.module（'selectExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
const ItemsInfo=[
{ITEM_ID:'a1'，COMMENT:'COMMENT a1'，优先级：0}，
{ITEM_ID:'b1'，COMMENT:'COMMENT b1'，优先级：1}，
{ITEM_ID:'c1'，COMMENT:'COMMENT c1'，优先级：2}，
];
让内容=“”；
for（设d=0；d

当然，使用指令展开@AlonEitan正确注释：使用角度模板中的ngRepeat指令创建复选框，而不是
for
循环。这将允许您设置与控制器代码的绑定。您的做法是错误的。您可能希望使用
ngRepeat
在模板中循环使用
ItemsInfo
。这里有一个代码笔，它将向您展示如何在文档不足时使用它：我尝试过，但在我的情况下，如果数据可用，我需要显示一些与项目相关的内容，如果不需要隐藏其他与项目相关的内容。使用ngRepeat，我无法检查检查数据的条件，因此无法动态创建文本框。根据您的代码进行更改后，我将在console.log中以[[object HTMLInputElement]]的形式获取消息，并使用.value（）以TypeError的形式获取错误消息。错误：cmnt.value不是函数。console.log（cmnt.value）；-->Undefinedy你可以说我愚蠢，忘记了我的基本知识，在jQuery中是
.val（）
，而不是
.value（）
。试试
val（）
；）
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());
};