Come visualizzare le informazioni all'interno di modal dall'URL?

Sono molto nuovo a js in generale quindi per favore sii paziente con me.Come visualizzare le informazioni all'interno di modal dall'URL?

Ho bisogno di fare un semplice compito che è indicato nell'argomento. Ho fatto alcune ricerche e ho provato a usare ui.router ma, dato che non sono molto bravo con la programmazione, qualcosa è andato storto.

voglio che queste informazioni da URL sarà visualizzato all'interno del dialogo modale http://prntscr.com/ashi5e

Quindi, ecco il codice:

angular.module('plunker', ['ui.bootstrap']); 
 
var ModalDemoCtrl = function ($scope, $modal, $log) { 
 

 
    $scope.open = function() { 
 

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

 

 
    }; 
 
}; 
 

 
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
 

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

<!doctype html> 
 
<html ng-app="plunker"> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 
 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
 
<script src="js/example.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 

 
<div ng-controller="ModalDemoCtrl"> 
 
<script type="text/ng-template" id="myModalContent.html"> 
 
    <div class="modal-header"> 
 
    <h3>Log</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 

 
    Content 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button class="btn btn-warning" ng-click="cancel()">Close</button> 
 
    </div> 
 
</script> 
 

 
<button class="btn" ng-click="open()">Log</button> 
 

 
</div> 
 
</body> 
 
</html>

fonte

2016-04-15 Frutis

È necessario per ottenere i dati (ad esempio, con un servizio) e metterlo in $ scope.items. Nel tuo modal fai lo stesso: prendi gli oggetti e collegali al tuo scope. Questo è tutto

angular.module('plunker', ['ui.bootstrap']); 
 
var ModalDemoCtrl = function ($scope, $modal, $log, $http) { 
 

 
    /* Get data here with a service or smth */ 
 
    $scope.items = ''; 
 

 
    $scope.open = function() { 
 
     $http.get("YOUR_URL") 
 
     .then(function(response) { 
 
      $scope.items = response.data 
 
      var modalInstance = $modal.open({ 
 
        templateUrl: 'myModalContent.html', 
 
        controller: 'ModalInstanceCtrl', 
 
        resolve: { 
 
        items: function() { 
 
         return $scope.items; 
 
        } 
 
       } 
 
      }); 
 
     }); 
 
    }; 
 
}; 
 

 
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
 
    $scope.items = items; 
 

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

<!doctype html> 
 
<html ng-app="plunker"> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 
 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
 
<script src="js/example.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 

 
<div ng-controller="ModalDemoCtrl"> 
 
<script type="text/ng-template" id="myModalContent.html"> 
 
    <div class="modal-header"> 
 
    <h3>Log</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 
    {{items}} 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button class="btn btn-warning" ng-click="cancel()">Close</button> 
 
    </div> 
 
</script> 
 

 
<button class="btn" ng-click="open()">Log</button> 
 

 
</div> 
 
</body> 
 
</html>

fonte

2016-04-15 09:43:33 trollr

$ scope.items = [{id: 1, nome: 'test'}, {id: 2, nome: 'test2'}]; So come farlo, ma ho bisogno di recuperare informazioni da un url. – Frutis

Forse potrei usare qualcosa come $ http.get? L'ho provato con Jason, ma è un file locale. Dove vorrei ottenere le informazioni da un server. – Frutis

Sì, hai ragione. Usa $ http.get e, in caso di successo, apri quella finestra modale. :-) –

Non hai registrato modalDemoCtrl e ModalInstanceCtrl in un primo momento è necessario registrarsi sia regolatore come: myApp.controller('modalDemoCtrl', ModalDemoCtrl); dove myApp è il modulo angolare come: var myApp = angular.module('plunker', ['ui.bootstrap']);.

è possibile utilizzare un servizio per ottenere dati da un url utilizzando $http e tale servizio viene inserito nel controller modalInstance. nel mio esempio creare dataService e una funzione denominata getData e denominata questa funzione dal controller modalInstance. come: dataService.getData().then(.. e utilizzare quindi la funzione per ottenere risposta. e memorizza i dati di risposta nella variabile $scope.infos in modo da poter utilizzare questo $scope.infos nel tuo modal.

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


var ModalDemoCtrl = function ($scope, $modal, $log) { 

    $scope.open = function() { 

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


    }; 
}; 
myApp.controller('modalDemoCtrl', ModalDemoCtrl); 


myApp.factory('dataService', function($http) { 
    return { 
    getData: function() { 
     return $http.get('http://prnt.sc/ashi5e'); 
    } 
    }; 
}); 


var ModalInstanceCtrl = function ($scope, $modalInstance, items, dataService) { 
    dataService.getData().then(function(response) { 
     $scope.infos = response.data; 
    }); 
    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}; 

myApp.controller('ModalInstanceCtrl', ModalInstanceCtrl);

fonte

2016-04-15 10:13:00

Grazie. Ci proverò quando tornerò a casa. Devo fare qualcosa con la parte html? – Frutis

html parte com'è, ma è necessario aggiornare per mostrare 'infos' nel proprio html e assicurarsi di avere accesso per ottenere i dati tramite l'url che si fornisce –

Come visualizzare le informazioni all'interno di modal dall'URL?

risposta

Problemi correlati