Problems to pick up input value in modal Angularjs

Asked

Viewed 433 times

0

I’m trying to get the input information and pass it to my controller scope but something is wrong and I couldn’t identify what it might be if someone could help thank you 

<section class="container" id="citys" ng-controller="CtrlTypeProperties"> 
 <script type="text/ng-template" id="modal-type-properties.html">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <form action="" method="post">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Adicionar Tipo de Im&oacute;vel</h4>
          </div>
          <div class="modal-body">
                <input type="text" class="form-control" ng-model="nameCity" name="name" placeholder="Cidade" />
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="cancel()" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" ng-click="add_type_properties()">Adicionar</button>
          </div>
        </form>
    </div>
  </div>
 </script>
</section>

<script>
  app.controller('CtrlTypeProperties', function($scope, $modal, $http){
   $scope.open_modal = function (){
    $modal.open({
        templateUrl: 'modal-type-properties.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
            name: function () {                     
                return $scope.nameCity;
            }
        }
    });
  }
});

 app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, name){ 
      $scope.name = '';
      console.log($scope.name);

      $scope.add_type_properties = function () {
         console.log($scope.name);
      };

      $scope.cancel = function () {
          $modalInstance.dismiss('cancelado'); 
      };
   });
</script>

All I need is to take the input value and update the modal controller Scope

javascript angularjs

1 answer

1

This is the code working right below. First I’ll explain 2 extracts of the modal component.

  1. You should listen to the end of the modal with .then() and manipulate the result. I did this by setting a modalInstance name variable var modalInstance = $modal.open({...}); and then listening to the modal completion on . then() so: modalInstance.result.then(...);.
  2. To achieve two-way databinding in this modal model (change the value in the form and variable at the same time), you must instantiate the variable within an object and not into a variable at the root of the $scope. Correct example: $scope.data = { name : name } instead of $scope.name = name }

<!DOCTYPE html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-app="myApp">
  


<section class="container" id="citys" ng-controller="CtrlTypeProperties"> 
<button ng-click="open_modal()">Show modal</button>
<p>Cidade: '{{name}}'</p>
 <script type="text/ng-template" id="modal-type-properties.html">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <form action="" method="post">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Adicionar Tipo de Im&oacute;vel</h4>
          </div>
          <div class="modal-body">
                <input type="text" class="form-control" ng-model="data.name" name="name" placeholder="Cidade" />
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="cancel()" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" ng-click="add_type_properties()">Adicionar</button>
          </div>
        </form>
    </div>
  </div>
 </script>
</section>

<script>
var app = angular.module('myApp', ['ui.bootstrap']);
  app.controller('CtrlTypeProperties', function($scope, $modal, $http){
    $scope.name = '';
    $scope.open_modal = function() {
      var modalInstance = $modal.open({
          templateUrl: 'modal-type-properties.html',
          controller: 'ModalInstanceCtrl',
          resolve: {
              name: function () {
                  return $scope.name;
              }
          }
      });


      modalInstance.result.then(resultado => {
        console.log('resultado: '+ resultado);
        $scope.name = resultado;
      });
    }
});

 app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, name){ 
      $scope.data = {
        name: name
      }

      $scope.add_type_properties = function () {
         console.log('close: '+ $scope.data.name);
         $modalInstance.close($scope.data.name);
      };

      $scope.cancel = function () {
          $modalInstance.dismiss('cancelado'); 
      };
   });
</script>


</body>

  • Thank you very much friend, I did several researches until I found this medium but as I’m still walking with the Angularjs I could not finish. It worked as I expected thank you even

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.