Search Posts

Added Input File through JQuery, didn’t submit any data in Angular Controller

First of all, sorry for bad english. I have some problems with Angular 1 and JQuery. Now here’s the thing. In the view, there is a button that adds up a file-type input box. Here is the code in Pug.

.col-md-8.form-group#upload-photos
    input.form-control(type="file", ng-file-select="", name="photos[0]", ng-model="photos[0]",  accept="image/*")
.col-md-1
    a.btn.btn-success#add-photos 
        | <i class="fa fa-plus"></i>

The button, which is the #add-photos will add a file-type input in the #upload-photos div. I have a code in Angular Controller that adds a file input using JQuery:

    $scope.photo_numbers = 1;
    $scope.photos = [];
    $scope.team.photos = [];

    /* Add Photo */
    $('#add-photos').click(function() {
        $('#upload-photos').append(
            $('<input/>')
                .addClass('form-control margin-top-xs')
                .attr('type', 'file')
                .attr('name', 'photos['+$scope.photo_numbers+']')
                .attr('ng-model', 'photos['+$scope.photo_numbers+']')
                .attr('accept', "image/*")
                .attr('ng-file-select', "")
        );
        $scope.photo_numbers += 1;
    });

It added the file-type input without any problems. The problem is when I submitted the data. If I added 2 more file input (that makes it 3 with the existing file input), only the first file input data that submitted to the form. Using console.log($scope.photos);, I was expecting that there is $scope.photos[0], $scope.photos1, and $scope.photos2. But the console, was only displaying only the [0].

Anomaly

I thought that maybe I type the ng-model wrong, so I checked the sources. It appears that the ng-model is not wrong.

enter image description here

So that’s it. Why did the $scope.photos1 and $scope.photos2 didn’t appear in the console.log?

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *