Как получить данные из динамически создаваемых текстовых полей ввода по нажатию кнопки сохранения в 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

Для начала правильные AngularJ будут использовать ngRepeat непосредственно в вашем HTML-шаблоне, но я все еще даю вам решение с вашим текущим кодом:

Во-первых, HTML-идентификатор должен быть уникальным, вы вручную зацикливаете свой массив в контроллере, чтобы вы могли добавить индексный номер к идентификатору и передать его своей функции для поиска элементов (также исправлен цикл for условие для оптимизации):

В этом случае привязка к модели бесполезна, иначе все входы будут использовать одну и ту же переменную области видимости. Этот код также показывает правильный способ получения элемента DOM в формате jQlite в AngularJS:

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());
};

Вот фрагмент, который демонстрирует. просто пример, чтобы показать, что это работает (EDIT: добавлена ​​директива $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>