Добавить новый HTML-контент с различными значениями в Angularjs - PullRequest
Новая
       39

Добавить новый HTML-контент с различными значениями в Angularjs

0 голосов
/ 06 сентября 2018

Я создал директиву для добавления содержимого при каждом нажатии кнопки «Добавить». Но я не знаю, как получить все значения в этих новых входах.

HTML-код 

angular.module('myApp', [])
  .controller('myController', function() {

  })
  .directive('addContent', function($document, $compile) {
    return {
      restrict: 'A',
      replace: false,
      link: function(scope, element, attr) {
        element.on('click', function() {
          var newcontent = '<input type="text" ng-model="myModel"><br>';
          angular.element($document[0].querySelector('.newcontent')).append($compile(newcontent)(scope));
        })
      }
    }

  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="newcontent" ng-app="myApp" ng-controller="myController">
  <button type="button" add-content>Add</button><br><br>
</div>

Итак, как я могу установить разные значения ng-model для каждого нового создаваемого входа и как я могу получить эти значения в моем контроллере?

1 Ответ

0 голосов
/ 06 сентября 2018

Вы могли бы пойти с чем-то вроде этого:

Идея:

  • Базовое имя может быть определено из HTML, где применяется директива.
  • Инкрементный номер используется в директиве при создании новых входов (контроллер представления (программист), где используется эта модель, должен знать об этом). На самом деле, вы можете использовать любую другую стратегию, которая вам больше подходит в этом случае Я использовал это для простоты и изложил свою точку зрения.

Код (см. Фрагмент ниже):

В директиве

  • Создать счетчик для увеличения при добавлении новых входов: var count = 0;
  • Взять базовое имя, указанное в html с var model = scope.$eval(attr['addContent']);
  • Измените переменную newcontent, чтобы использовать это базовое имя и инкрементный счетчик следующим образом: var newcontent = '<input type="text" ng-model="' + model + (count++) + '"><br>';

Контроллер

  • Для организации создайте переменную для хранения базового имени: $scope.buttonModel = 'buttonModelReference';
  • Доступ к значению этих новых моделей, например: $scope[$scope.buttonModel + $scope.index], где $scope.index - индекс входа (где 0 - первый созданный вход)

Вид

  • Используйте модифицированную директиву, подобную этой add-content="buttonModel", где buttonModel - переменная, определенная в контроллере.

Код плюс (только для демонстрационных целей)

  • Функция showModel показывает значение одного (динамически созданного) входа, передаваемого в качестве ссылки на индекс входа (0 ноль - индекс первого созданного входа)

Фрагмент 

angular.module('myApp', [])
  .controller('myController', function($scope) {

    $scope.index;
    $scope.buttonModel = 'buttonModelReference';

    $scope.showModel = function() {
      console.log($scope[$scope.buttonModel + $scope.index]);
    }

  })
  .directive('addContent', function($document, $compile) {
    var count = 0;
    return {
      restrict: 'A',
      replace: false,
      link: function(scope, element, attr) {
        element.on('click', function() {
          var model = scope.$eval(attr['addContent']);
          var newcontent = '<input type="text" ng-model="' + model + (count++) + '"><br>';
          angular.element($document[0].querySelector('.newcontent')).append($compile(newcontent)(scope));
        })
      }
    }

  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="newcontent" ng-app="myApp" ng-controller="myController">
  <button type="button" ng-click="showModel()">showModel</button> &nbsp; <input ng-model="index" type="number" placeholder="select the model index starting from 0" /> <br><br>
  <button type="button" add-content="buttonModel">Add</button><br><br>
</div>
...