Show modal data by angular ui

Question

Show modal data by angular ui

Navigation

#1 by (2 votes)

3

Hello

By clicking on the link:

<a href="" class="btn btn-info btn-block" ng-click="editarCliente(cliente)">

opens a modal ( bootstrap ) and should display the data contained in cliente .

I'm using angular ui

Follow $scope

$scope.editarCliente = function($cliente) {

    $scope.clienteEdit = {
        CliNome: $cliente.cli_nome,
        CliTelefone: $cliente.cli_telefone,
        CliEmail: $cliente.cli_email,
        CliDescricao: $cliente.cli_descricao
    };

     var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'clienteController',
      //size: size,
      resolve: {
        cliente: function () {
          return $scope.clienteEdit;
        }
      }
    });

Note: open the modal without problems:

<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
    <h3 class="modal-title">Editar</h3>
</div>
<div class="modal-body">
    <ul>
        <li ng-repeat="item in items">
            <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
        </li>
    </ul>
    Selected: <b>{{ clienteEdit.CliNome }}</b>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">Salvar</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Fechar</button>
</div>

But it does not display the content of $scope

javascript angularjs

asked by anonymous 29.07.2016 / 19:41

1 answer

Effect in jQuery does not work with datepicker How to make NetBeans recognize the syntax of the ES2015?

score 2 · Accepted Answer

As I have not seen your full code I still do not quite understand, but come on. In this example we have two Controllers , one is only responsible for Modal. Notice that in the same way that you return the client in resolve I also return.

Then, in Controller of modal we inject the client:

.controller("ModalCtrl", function($scope, $modalInstance, cliente) {..}

Then you can get the values that were passed.

$scope.cliente = cliente;

And then just go to your view:

<div class="modal-body">
   {{cliente .nome}}
</div>

Complete Example:

angular.module("myApp", ['ui.bootstrap'])

    .controller("MyCtrl", function($scope, $modal) {
        $scope.showModal = function() {
          
            $scope.cliente = {
                id: 1,
                nome: 'Diego',
                idade: 23
            }
            
            $modal.open({
                templateUrl: 'myModal.html',
                controller: 'ModalCtrl',
                resolve: {
                    cliente: function() {
                        return $scope.cliente;
                    }
                }
            });
        }
    })

.controller("ModalCtrl", function($scope, $modalInstance, cliente) {
    $scope.clente = cliente;
    console.log(cliente);
    $scope.ok = function() {
        $modalInstance.close();
    };

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

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-0.11.0.min.js"></script>
<script src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.11.0.min.js"></script><divng-app="myApp">
    <script type="text/ng-template" id="myModal.html">
        <div class="modal-header">
            <h3 class="modal-title">Modal title</h3>
        </div>
        <div class="modal-body">
            {{clente.nome}}
        </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 ng-controller="MyCtrl">
        <input type="button" value="Show modal" ng-click="showModal()"/>
    </div>
</div>