Динамический шаблон Push в AngularJS - PullRequest
Новая
       8

Динамический шаблон Push в AngularJS

0 голосов
/ 30 апреля 2018

Ниже описано, как я создаю свой шаблон, я пытаюсь вставить шаблон в строку. ниже моя директива, 

  .directive('myCustomRowTemplate', function () {
        return {
            templateUrl: '/sites/all/themes/platinum_printing/js/extjs/angular/views/campaign_script_options.html',
            }
        })

И здесь я пытаюсь внедрить эту директиву («которая пытается вызвать шаблон») в DOM. 

$scope.personalDetails = [{'add_tempalte': '<div my-custom-row-template> </div>',}];

$scope.addNew = function (personalDetail) {
                $scope.personalDetails.push({
                    'add_template': '<div my-custom-row-template> </div>',
                });
            };

$scope.addCondition = function () {
                    $scope.conditions.push('myCustomRowTemplate');
                };

но я получаю эту ошибку

TypeError: Невозможно прочитать свойство 'push' из неопределенного

Редактировать

мой раздел HTML, где я использую мой шаблон 

<section class="main_container">
  <div class="container">
  <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form ng-submit="addNew()">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/></th>
                                        <th>Setup Responses</th>
                                        <th>Add Condition</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="personalDetail in personalDetails">
                                        <td>
                                            <input type="checkbox" ng-model="personalDetail.selected"/>
                                        </td>
                                        <td>

                                            <div ng-repeat="condition_set in conditions" my-custom-row-template> </div>
                                        </td>
                                        <td>

                                            <input type="button" value="Add Condition" ng-click="addCondition()" class="btn btn-primary addnew"/>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="form-group">
                                <input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right"
                                       ng-click="remove()" value="Remove">
                                <input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</section>
</span>

РЕДАКТИРОВАТЬ # 2 

var templateForCondtions = '<div class="table table-striped table-bordered row">' +
                        '<li>' +
                        '<select>' +
                        '<option>Response Message</option> ' +
                        '<option>IF</option> ' +
                        '<option>Else</option> ' +
                        '</select> ' +
                        '<input type="text" class="form-control" ng-model="personalDetail.message" required/> ' +
                        '<select> ' +
                        '<option>Step 2</option> </select> ' +
                        '<select> <option>Add Step</option> </select> ' +
                        '<a href="#">Remove Conditions</a> ' +
                        '</li> </div>';
                    $scope.conditions.push(templateForCondtions);
                    $scope.addCondition = function () {
                        $scope.conditions.push(templateForCondtions);
                    };

1 Ответ

0 голосов
/ 01 мая 2018

Я взял ваш код и создал небольшой пример. Кажется, вы забыли инициализировать переменную условия, как здесь 

$scope.conditions = [];

Вот почему вы получили неопределенную ошибку. Проверьте мой код ниже - это работает. И не забудьте использовать track by Statement для ng-repeat. Здесь вы можете прочитать об этом подробнее.

Надеюсь, это поможет. 

(function() {
  var app = angular.module('app', []);
  app.controller('ctrl', ['$scope', function($scope) {
    $scope.personalDetails = [{
      'add_tempalte': '<div my-custom-row-template> </div>',
    }];
    
    $scope.conditions = [];

    $scope.addNew = function(personalDetail) {
      $scope.personalDetails.push({
        'add_template': '<div my-custom-row-template> </div>',
      });
    };

    $scope.addCondition = function() {
     $scope.conditions.push('myCustomRowTemplate');
    };
  }]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="ctrl">
    <section class="main_container">
      <div class="container">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-default">
                <div class="panel-body">
                  <form ng-submit="addNew()">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
                          <th>Setup Responses</th>
                          <th>Add Condition</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="personalDetail in personalDetails">
                          <td>
                            <input type="checkbox" ng-model="personalDetail.selected" />
                          </td>
                          <td>

                            <div ng-repeat="condition_set in conditions track by $index" my-custom-row-template> </div>
                          </td>
                          <td>

                            <input type="button" value="Add Condition" ng-click="addCondition()" class="btn btn-primary addnew" />
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <div class="form-group">
                      <input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
                      <input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    </span>
  </div>
</div>
...