Использование md-autocomplete в строках таблицы с командами добавления / удаления - PullRequest
Новая
       22

Использование md-autocomplete в строках таблицы с командами добавления / удаления

0 голосов
/ 12 февраля 2020

У меня есть массив запросов, который отображается в виде таблицы, и я пытаюсь внедрить md-autocomplete в каждой строке, чтобы выбрать элементы. Пользователи могут добавлять, редактировать или удалять строки. Я попытался выполнить это с помощью индекса строки, но это вызвало некоторые ошибки при удалении и добавлении новых строк. Строки данных смешивают друг друга, или это показывает удаленное значение элемента, когда я добавляю новые строки. В конце концов я хочу получить массив запросов правильно.

У меня есть codepen здесь. 

<div ng-controller="DemoCtrl as vm" layout="row" ng-app="MyApp">
  <md-content class="md-padding">
    <form name="requestForm">
     <table>
        <thead>
          <tr>
            <th><span>Item</span></th>
            <th class="quantity"><span>Quantity</span></th>
            <th class="actions">
              <md-button class="md-primary" aria-label="Add row" ng-click="vm.addRow()">Add Row
              </md-button>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="request in vm.requests track by $index">
            <td class="item">
              <md-autocomplete 
                md-input-name="itemKey[$index]"
                md-no-cache="true" 
                md-selected-item="vm.selectedItems[$index]"
                md-selected-item-change="vm.selectedItemChange($index, item)"
                md-search-text="vm.searchTextItem[$index]"
                md-items="item in vm.searchItem(vm.searchTextItem[$index])" 
                md-item-text="item.name" 
                md-floating-label= "*"
                md-require-match="" 
                ng-disabled="false"
                md-delay = "300"
                md-no-asterisk= true
                md-autoselect=false
                input-aria-describedby="Item">
                <md-item-template>
                  <span md-highlight-text="vm.searchTextItem[$index]">{{item.name}}</span>
                </md-item-template>
                <div ng-messages="requestForm.itemKey[$index].$error" ng-if="requestForm.itemKey[$index].$touched">
                  <div ng-message="required"></div>
                  <div ng-message="md-require-match"></div>
                </div>
              </md-autocomplete>
            </td>
            <td class="quantity">
              <md-input-container>
                <input ng-model="request.quantity" name="quantity" type="number" min="0.01"
                       required aria-label="quantity">
                <div ng-messages="requestForm.quantity.$error" role="alert">
                  <div ng-message="required"></div>
                  <div ng-message="number"></div>
                  <div ng-message="min"></div>
                </div>
              </md-input-container>
            </td>
            <td class="actions">
              <md-button class="md-accent" ng-click="vm.deleteRow($index)" aria-label="Delete">Delete
              </md-button>
            </td>
          </tr>
        </tbody>
      </table>
      </form>
  </md-content>

  <textarea spellcheck="false" cols=48 rows=24>{{vm.getRequests()}}</textarea>
  <textarea spellcheck="false" cols=48 rows=24>{{vm.getSelectedItems()}}</textarea>
</div>

Мой контроллер js

(function () {
  'use strict';
  angular
      .module('MyApp',['ngMaterial', 'ngMessages'])
      .controller('DemoCtrl', DemoCtrl);

  function DemoCtrl ($timeout, $q) {
    var vm = this;
    vm.selectedItemChange = selectedItemChange;
    vm.searchItem = searchItem;
    vm.addRow = addRow;
    vm.deleteRow = deleteRow;
    vm.getRequests = getRequests;
    vm.getSelectedItems = getSelectedItems;
    vm.items = [];
    vm.requests = [];
    vm.selectedItems = {};

    for (var i=0; i<100; i++) {
      vm.items.push({key: i, name: "item"+i});
    }

    addRow();

    function getRequests() {
      return JSON.stringify(vm.requests, undefined, 4);
    }

    function getSelectedItems() {
      return JSON.stringify(vm.selectedItems, undefined, 4);
    }

    function addRow() {
      vm.requests.push({
        'itemKey': '',
        'quantity': 0
      });
    }

    function deleteRow(index) {
      vm.requests.splice(index, 1);
      delete vm.selectedItems[index];
    }

    function createFilterFor(query) {
      var lowercaseQuery = query.toLowerCase();
      return function filterFn(rec) {
        return (rec.name.toLowerCase().indexOf(lowercaseQuery) > -1);
      };
    }

    function searchItem(query) {
      var results = query ? vm.items.filter(createFilterFor(query)) : vm.items;
      return results;
    }

    function selectedItemChange(index, item) {
      if (!item) {return;} 
      vm.requests[index].itemKey = item.key;
    }

  }
})();
...