Question

以下是我如何创建我的模板，我正在尝试将模板推送到ROW。以下是我的指示，

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

Answer 1

我拿了你的代码并创建了一个小例子。似乎你忘了像这里一样初始化你的条件变量

$scope.conditions = [];

这就是你得到未定义错误的原因。检查我的代码如下 - 它的工作原理。并且不要忘记使用track by语句进行ng-repeat。 Here您可以阅读更多相关信息。

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在AngularJS中动态推送模板

1 个答案: