如何在angularjs-ui-bootstrap中使用模态弹出窗口

how to use modal pop up in angularjs-ui bootstrap

本文关键字：模态 窗口 angularjs-ui-bootstrap      更新时间：2023-09-26

我使用的是angularjs。我想做的是当用户点击按钮时，angularjs会检查数据库中的项目id。如果数据库中存在项目id，则会显示#modal，而不是像下面这样的警报。用angularjs可以做到这一点吗？如果可能的话。。

HTML

    <div id="container" ng-app='two_way' ng-controller="aa" >
<div align="center">
 <h1 align="center">  Nutrition Scheduling List </h1>
        <button ng-click="loadsched()" >LOAD SCHEDULE</button>
</div>
<span ng-hide="load==null">
<table border='1' bgcolor="CCFFFF" align="center">
<tr ><td><b>Item Name</b></td><td><b>Scheduled Time</b></td><td><b>Run Time</b></td><td><b>Create Time</b></td><td><b>Status</b></td><td><b>Response</b></td></tr>
 <tr ng-repeat="data in load | orderBy: 'searchitem'">
    <td>
         {{data.searchitem}}
        </td>
    <td>
         {{data.Scheduledtime}}
        </td>
    <td>
         {{data.runt}}
        </td>
    <td>
         {{data.CurrentTime}}
        </td>
    <td>
         {{data.STATUS}}
        </td>
    <td>
<input type="button" class="btn btn-lg btn-primary" value="RESPONSE" onclick="window.open('http://localhost:3000/search/{{data._id}}','popUpWindow','height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');">
        </td>
</tr>
</table>
</span>
    <script src="more.js"></script>
    </div>

控制器more.js

var app=angular.module('two_way', ['ui.bootstrap']);
app.controller('aa',function($scope,$http){
$scope.loadsched=function(){
  $http.post("http://localhost:3000/a").success(function(data){    
//console.log(data);
    $scope.load=angular.fromJson(data);

  }).error(function(){alert("Error");});
}

});

非常简单：-

1） 将$modal应用于主控制器。

2） 使用$modal.open()在任意位置打开modal，它将返回一个promise。

 $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size
);

这里的模板是您的模式模板的文件或Id。大小：sm，lg控制器它是模态的控制器。例如：-

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };
  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

$modalInstance服务用于关闭和返回来自modal的promise。

$modalInstance.close($scope.selected.item);关闭模态并将数据返回给控制器。

$modalInstance.dismiss('cancel');则简单地解除控制器。

modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

这里modalInstance.result用于将数据从模态控制器获取到主控制器。

官方Plunker

相关文章：