Angular Modal Text Boxes Not Getting Populated with ngModel

Question

I have a table with TV show data on it. I populate the table with dir-paginate/ng-repeat and I can click a row to open a modal to be able to edit the show but the ng-model data is not loading on the text boxes within that modal.

<tr id='schedule_row' class='hover_click_cell' dir-paginate='tv_show in tv_shows | orderBy:sortType:sortReverse | itemsPerPage:10'>
<td class='center_text clickable_cell cell_width' ng-click='alter_show(tv_show)'>{{tv_show.show_name}}</td>

When clicked, it calls the function alter_show()

$scope.alter_show = function(show)
{
    $scope.edit_show = show;
    var modalInstance = $uibModal.open    ({    animation: $controller.animationsEnabled,
                                                ariaLabelledBy: 'modal-title',
                                                ariaDescribedBy: 'modal-body',
                                                templateUrl: 'edit_tv_show.html',
                                                controller: 'EditTvShowCtrl',
                                                controllerAs: '$controller',
                                                size: 'sm',
                                                backdrop: 'static',
                                                keyboard: false
                                        });

    modalInstance.result.then(function (action) 
    {

    }, 
    function () {
    });
}

The data passed looks like this in JSON form:

{"watched":false,"id":1,"show_name":"The Walking Dead","season":1,"episode":1,"season_episode":"Season 1, Episode 1","$$hashKey":"object:4"}

I pass in the show details and set it to the $scope.edit_show object. The data being passed on is not empty but when the modal is opened, the text boxes aren't populated. These are the input boxes:

$scope.edit_show = {
    show_name: '',
    season: 0,
    episode: 0,
    watched: 0
};

<div class='form-group'>
<label for='show_name'>Show Name:</label>
<input type='text' class='form-control' id='edit_show_name' ng-model='edit_show.show_name'>
</div>

<div class='form-group'>
<label for='season'>Season:</label>
<input type='number' class='form-control' id='edit_season' ng-model='edit_show.season'>
</div>

How can I get this to populate the text box with the details from the row that has been clicked?

Text box does not populated or value not binded? – Ramesh Rajendran Apr 26 '17 at 12:35 — Ramesh Rajendran, Apr 26 '17 at 12:35

score 0 · Answer 1 · answered Apr 26 '17 at 12:51

I've manage to figure it out using resolve for the modalInstance.

$scope.alter_show = function(show)
{
    var modalInstance = $uibModal.open    ({    animation: $controller.animationsEnabled,
                                                ariaLabelledBy: 'modal-title',
                                                ariaDescribedBy: 'modal-body',
                                                templateUrl: 'edit_tv_show.html',
                                                controller: 'EditTvShowCtrl',
                                                controllerAs: '$controller',
                                                size: 'sm',
                                                backdrop: 'static',
                                                keyboard: false,
                                                resolve: { tv_show : function() { return show; } }
                                        });

    modalInstance.result.then(function (action) 
    {

    }, 
    function () {
    });
}

angular.module('ui.bootstrap').controller('EditTvShowCtrl', function ($uibModalInstance, $scope, tv_show) 
{
    var $controller = this;

    $scope.edit = tv_show;
});

Angular Modal Text Boxes Not Getting Populated with ngModel

1 Answers1