CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeatangular-material
Claudio
Claudio

Reputation: 5203

ng-repeat in mddialog repeats itself multiple times

I have a problem using the ng-repeat in a angular materials dialog (mdDialog). The ng-repeat, repeats itself, depending on the length of the array, if it has 4 elements, then it runs for times.

What I want is to print a list of checkboxes:

This is my html code:

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

And my controller:

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

Here's a codepen:

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

Anyone knows what's happening or what I'm doing wrong?

Upvotes: 4

Views: 976

Answers (1)

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

Instead of using 

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

You should use templateURL becuase tourDataForm has already rendered if you check it has four .Now if you going to pass it to mddialog this template: angular.element('#tourDateForm').html(), it already has 4 ngrepeat .Each ngrepeat will 4 times thus 16 times you are getting checkbox

For example 

templateUrl: 'tabDialog.tmpl.html',

Upvotes: 1

Related Questions