Sports Racer
Sports Racer

Reputation: 456

Angular UI Bootstrap modal result is undefined

I'm building an app that loads a modal on a click on a button in an ng-grid row. Displaying the modal and the correct data works great. Problem is with getting the data back form the form in the modal. This bit of code

modalInstance.result.then(function(selectedItem){
                $scope.selected = selectedItem;
            });

Returns 'undefined' for 'selectedItem'

Here's the modal.

    <div ng-app="myApp">
    <div ng-controller="UsersCtrl">
        <script type="text/ng-template" id="editUserModal.html">
            <div class="modal-header">
                <h3 class="modal-title">Edit User <em>{{user.user_full_nm}} {{user.user_id}}</em></h3>
            </div>
            <div class="modal-body">
                <p>User Name: <input type="text" name="user_full_nm" value="{{user.user_full_nm}}"></p>
                <p>Email: <input type="text" name="user_nm" value="{{user.user_nm}}"></p>
                <p>Active:  
                    <select ng-model="user.deleted" ng-selected="user.deleted">
                        <option value="0" ng-selecte>Active</option>
                        <option value="1">Inactive</option>
                    </select>
                </p>
                <p>Termination Date: {{user.termination_date | date:'longDate'}}</p>
                <p>Last Entry Date: {{user.last_entry | date:'longDate'}}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>

         <div class="gridStyle" ng-grid="gridOptions"></div>

    </div>
</div>

Here's the Angular app.

    var app = angular.module('myApp', ['ngGrid','ui.bootstrap']);

    app.controller('UsersCtrl', function($scope, $http, $modal) {

    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: false
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [20, 40, 60],
        pageSize: 20,
        currentPage: 1
    };  
    $scope.setPagingData = function(data, page, pageSize){  
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.userData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('getUsers').success(function (largeLoad) {      
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });            
            } else {
                $http.get('getUsers').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage,    
$scope.filterOptions.filterText);
        }
    }, true);

    var editUserButtonTemplate = '<i class="fa fa-pencil" style="cursor:pointer;" ng-click="editUser(row.entity)"></i>';
    $scope.gridOptions = {
        data: 'userData',
        columnDefs: [
            {field: 'user_id', displayName: 'User ID', visible: false},
            {field: 'user_nm', displayName: 'Email'},
            {field: 'user_full_nm', displayName: 'Name'},
            {field: 'deleted', displayName: 'Active', width: 60, cellFilter: 'activeFilter'},
            {field: 'termination_date', displayName: 'Termination Date',cellFilter: 'date:\'longDate\''},
            {field: 'last_entry', displayName: 'Last Entry Date',cellFilter: 'date:\'longDate\''},
            {field: '', DisplayName: '', cellTemplate: editUserButtonTemplate, colFilterText: '',  width:20}
        ],
        enablePaging: true,
        showFooter: true,
        showFilter: true,
        enableRowSelection: false,
        filterOptions: $scope.filterOptions,
        totalServerItems:'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions
    };


    /************ open the edit user modal *********************/
    $scope.editUser = function(value) {

        var modalInstance = $modal.open({
          templateUrl: 'editUserModal.html',
          // scope: $scope,
          controller: 'editUserCtrl',          
          resolve: {
            user: function () {
              return value;
            }
          }
        });

        modalInstance.result.then(function(selectedItem){
            $scope.selected = selectedItem;
        });
    };
  });

  app.controller('editUserCtrl', function($scope, $http, $modalInstance, user) {
    $scope.user = user;
    $scope.ok = function () {
        $modalInstance.close($scope.selected);
      };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
  });

  // for the 'deleted' column, display 'Active' or 'Inactive' instead of 1 or 0
  app.filter('activeFilter', function(){
    var types = ['Active', 'Inactive'];
    return function(type){
        return types[type];
    };
 });

Upvotes: 1

Views: 3925

Answers (1)

Sports Racer
Sports Racer

Reputation: 456

So as happens so often, as soon as I posted my question I found this one.

angular-ui-bootstrap modal not passing back result

Which led me to the problem.

$scope.ok = function () {
        $modalInstance.close($scope.selected);
      };

Changed $scope.selected to $scope.user and it's working as expected now.

Upvotes: 1

Related Questions