Append Data to existing json array through Angular-Bootstrap dialog modal

Question

I am facing issue while adding data through Angular Dialog modal

Here My plunker http://plnkr.co/edit/EJpkmXqNAcuN3GJiLvAL?p=preview

    <table class="table table-bordered">
        <thead>
          <tr>
            <th>
              <input type="checkbox" ng-model="isAll" ng-click="selectAllRows()"/>ALL
            </th>
            <th>
              ID
            </th>
            <th>
              NAME
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in data" ng-class="{'success' : tableSelection[$index]}">
            <td>
              <input type="checkbox" ng-model="tableSelection[$index]" />
            </td>
            <td>{{row.id}}</td>
            <td>{{row.name}}</td>
          </tr>
        </tbody>
      </table>


<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">Im a modal!</h3>
        </div>


         <form name = "addFriendForm">
          <input ng-model = "user.id"class="form-control" type = "text" placeholder="id" title=" id" />

          <input ng-model = "user.name"class="form-control" type = "text" placeholder="name" title=" name" />
        </form>

        <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>***strong text***

Here Script.js

While trying get data from dialog modal it was not coming Can you please any one help me out of this problem

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

app.controller('MainCtrl', function($scope,$modal,$log) {
  $scope.user = {id: "",name:""}
  $scope.data = [{
    id: 1,
    name: 'Name 8'
  }, {
    id: 2,
    name: 'Name 7'
  }];
  $scope.tableSelection = {};

  $scope.isAll = false;
  $scope.selectAllRows = function() {
    //check if all selected or not
    if ($scope.isAll === false) {
      //set all row selected
      angular.forEach($scope.data, function(row, index) {
        $scope.tableSelection[index] = true;
      });
      $scope.isAll = true;
    } else {
      //set all row unselected
      angular.forEach($scope.data, function(row, index) {
        $scope.tableSelection[index] = false;
      });
      $scope.isAll = false;
    }
  };

  $scope.removeSelectedRows = function() {
    //start from last index because starting from first index cause shifting
    //in the array because of array.splice()
    for (var i = $scope.data.length - 1; i >= 0; i--) {
      if ($scope.tableSelection[i]) {
        //delete row from data
        $scope.data.splice(i, 1);
        //delete rowSelection property
        delete $scope.tableSelection[i];
      }
    }
  };

  $scope.addNewRow = function() {
    //set row selected if is all checked
    $scope.tableSelection[$scope.data.length] = $scope.isAll;
    $scope.data.push({
      id: $scope.data.length,
      name: 'Name ' + $scope.data.length
    });
  };



  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        data: function () {
          return $scope.data;
        }
      }
    });

    modalInstance.result.then(function (data) {
      $scope.user = data;
      $scope.data.push($scope.user);
     // $scope.data.push({'id':$scope.data.id,'name':$scope.data.name});
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

});


angular.module('myapp').controller('ModalInstanceCtrl', function ($scope, $modalInstance, data) {

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


  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

Answer 1

You should create $scope.user object in your ModalInstanceCtrl and add $scope.user in your $modalInstance.close like this:

angular.module('myapp').controller('ModalInstanceCtrl', function ($scope,$modalInstance) {
  $scope.user = {};
  $scope.ok = function () {
      $modalInstance.close($scope.user);
  };

  $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
  };
});

I've checked this in your plunker, so it works