mddialog中的angularjs-ng-repeat多次重复

前端之家收集整理的这篇文章主要介绍了mddialog中的angularjs-ng-repeat多次重复前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在角度材料对话框(mdDialog)中使用ng-repeat时遇到问题. ng-repeat重复自身,取决于数组的长度,如果它有4个元素,那么它会运行一段时间.

我想要的是打印一个复选框列表:

这是我的HTML代码

<div id="tourDateForm" class="col-md-12 hidden">
<md-dialog>
    <md-toolbar>
    </md-toolbar>
    <md-dialog-content>
        <form id="tourForm" class="dialogContent">
            <input type="hidden" name="id" ng-model="id">

            <label for="ticket">Ticket</label>
            <label ng-repeat="ticketd in ticketData">
                <input type="checkBox" name="ticket"  value="" required>
            {{ticketd.test}}
            </label>

        </form>
    </md-dialog-content>
    <md-dialog-actions>
    </md-dialog-actions>
</md-dialog>

而我的控制器:

var tours = angular.module('tourDates',['ngMaterial']);

    tours.controller('tourDateCtrl',['$scope','$mdDialog',function ($scope,$mdDialog) {

        $scope.ticketData = [{test:1},{test:2},{test: 3},{test: 4}];

        $scope.showForm = function (ev) {
            $mdDialog.show({
                controller: DialogController,scope: $scope,preserveScope: false,template: angular.element('#tourDateForm').html(),parent: angular.element(document.body),targetEvent: ev
            });
        }

        function DialogController($scope,$mdDialog) {
            $scope.save = function () {
                console.log('submit');
            };
            $scope.cancel = function () {
                $mdDialog.cancel();
            };
        }
}]);

这是一个codepen:

http://codepen.io/cladin/pen/LZxJvJ

任何人都知道发生了什么或我做错了什么?

解决方法

而不是使用

template: angular.element('#tourDateForm').html(),

您应该使用templateURL,因为如果您检查它有四个已经呈现的tourDataForm.现在如果您要将它传递给mddialog这个模板:angular.element(‘#tourDateForm’).html(),它已经有4 ngrepeat.每个ngrepeat这将是你获得复选框16次的4倍

例如

templateUrl: 'tabDialog.tmpl.html',

猜你在找的Angularjs相关文章