angularjs+bootstrap modal的使用

在AngularJS中主要使用bootstrap-modal使用弹窗效果。

安装bootsrap-modal插件：

bower install bootstrap-modal --save

基本组件引用：

html开发：

      

        

          

            

              ×
              
添加NAT网关
            
            

              

                ip地址：
                

                  
                
              
              

                端口号：
                

                  
                
              
            
            

              关闭
              确定
            
          

        

      

上述创建了一个modal，其中有两个label，两个input和两个button。

js开发：

定制modal中相关动作实现，这时候就需要在controller中添加部分代码：

    $('#addNatgwModalBtn').on('click', function () {
      var ipAddr = $('#natgwAddIp').val();
      var port = $('#natgwPort').val();
      var data = {'ip': ipAddr, 'agent_port': port};

      $http({
        url: 'http://127.0.0.1:8000/api/v1/natgw',
        method: 'post',
        data: data
      }).then(
        function successCallback(response) {
          console.log('response is:', response);
          $('#addNatgwModal').modal('hide');
          $('#natgwTable').bootstrapTable('refresh', {silent: true});
        },
        function errorCallback(error) {
          console.log('response is:', error);
        }
      )
    });

结果呈现：

modal_page.png

---

参考资料：

• Bootstrap 模态框（Modal）插件