Как отслеживать существующие данные каждый раз, когда я динамически добавляю новый элемент

Question

Как отслеживать существующие данные каждый раз, когда я динамически добавляю новый элемент

0

<div ng-controller="MyCtrl">
  <button ng-click=addItem()>add Item</button>
  <div ng-repeat="item in content">
    <my-directive category-options="categoryOptions" item-options="itemOptions" category-option-change="categoryOptionChange(selectedOption)" delete-item="deleteItem(index)" index={{index}}></my-directive>
  </div>
</div>

myApp.directive('myDirective', function() {
  return {
    scope: {
      categoryOptions: "=",
      deleteItem: "&",
      index: '@',
      itemOptions: "=",
      categoryOptionChange: "&"
    },
    restrict: 'AE',
    template: "<p>\r" +
      "\n" +
      "    <select ng-model=\"categoryOptions.selectedOption\" ng-options=\"option as option.name for option in categoryOptions\" ng-change=\"categoryOptionChange({selectedOption:categoryOptions.selectedOption})\">\r" +
      "\n" +
      "         <option value=\"\">choose</option>\r" +
      "\n" +
      "    </select> \r" +
      "\n" +
      "    <select ng-model=\"itemOptions.selectedOption\" ng-options=\"option as option.name for option in itemOptions\">\r" +
      "\n" +
      "        <option value=\"\">choose</option>\r" +
      "\n" +
      "    </select>\r" +
      "\n" +
      "     [<a href ng-click=\"deleteItem({index:index})\">X</a>]\r" +
      "\n" +
      "</p>\r" +
      "\n"

  }
});

Каждый раз, когда я нажимаю, новый элемент добавляется с двумя элементами управления. Исходя из выбранного варианта выбора выбранного выбора, меняются параметры выбора второго выбора. И пользователь может добавить любое количество элементов, которые он может. До сих пор он работает нормально. Проблема, с которой я сталкиваюсь, позволяет сказать, добавляю ли я элемент и изменяю параметр в элементе управления select, а затем добавляю новый элемент, а затем вновь добавленный элемент также показывает те же данные, которые были выбраны ранее. Я знаю, что это проблема с привязкой данных, но я не уверен, как эффективно ее решить, чтобы

Параметры "выбрать" по умолчанию должны отображаться всякий раз, когда я добавляю новый элемент.
Я должен иметь возможность отслеживать данные в каждом элементе, если он изменяется.

Я включил JSFiddle

Ravi Teja 01 апр. 2016, в 17:00

Источник

Теги:

angularjs

angularjs-directive

2 ответа

0

Прикрепите контроллер к директиве, а в контроллере-регуляторе обратитесь к itemOptions для каждой директивы. Вам нужно сохранять состояние для каждой директивы отдельно, но вы не являетесь - вы сохраняете состояние для всех директив в родительской области.

pfooti 01 апр. 2016, в 12:19

Ещё вопросы

Sumit Deshpande · Accepted Answer · 2016-04-01T15-25-00.000Z

Я бы предложил следующее решение. Рабочий пример можно найти на странице: @sumit Plunker Здесь пример кода:

var app = angular.module('app', []);

app.controller("mainController", function($scope) {
  $scope.content = [];
  $scope.addSentence = function() {
    $scope.content.push({});
  };
  $scope.deleteItem = function(index) {
       $scope.content.splice(index, 1);
  };
  $scope.categoryOptions = [{
    name: "Books"
  }, {
    name: "Electronics"
  }];
  $scope.itemOptions = {
    books: [{
      name: "Harry Potter1"
    }, {
      name: "Harry Potter2"
    }, {
      name: "Harry Potter3"
    }],
    electronics: [{
      name: "Computer"
    }, {
      name: "Phone"
    }, {
      name: "Television"
    }]
  };
});

app.directive('myDirective', function() {
  return {
    scope: {
      categoryData: "=categoryOptions",
      deleteItem: "&",
      index: '@',
      itemData: "=itemOptions",
      categoryOptionChange: "&"
    },
    restrict: 'AE',
    templateUrl: "itemSelectTemplate.html",
    controller: function($scope) {
      $scope.itemOptions = [];
      $scope.categorySelectedOption = {};
      $scope.itemSelectedOption = {};
      $scope.categoryOptionChange = function(selectedOption) {
        if (selectedOption !== null) {
          switch (selectedOption.name) {
            case "Books":
              $scope.itemOptions = $scope.itemData.books;
              break;
            case "Electronics":
              $scope.itemOptions = $scope.itemData.electronics;
              break;
          }
        }
      }
    }
  }
});

Надеюсь, что это поможет вам! :)