angularjs+bootstrap+ngDialog实现模式对话框
2016-02-26 14:54
686 查看
首先引入需要的ngdialog的js和css文件。
可通过CDN引入
test.html(读取scope中的address并显示,表格样式采用bootstrap )
user.html (显示用户的信息,当地址不为空时,显示详细地址按钮,并点击按钮时,调用controller中的clickToAddress函数)
可通过CDN引入
全选复制放进笔记[code]var userControllers = angular.module('userControllers',['ngDialog']); userControllers.controller('userController',['$scope','$http','ngDialog',function($scope,$http, ngDialog){ $scope.name = 'user'; $scope.user = ""; $scope.address = ""; //获取用户信息 $http.get('http://localhost:3000/users').success(function(data) { $scope.user = data; console.log($scope.user); }); //点击详细地址按钮时,跳出模式对话框 $scope.clickToAddress = function (address) { $scope.address = address; ngDialog.open({ template: 'views/test.html',//模式对话框内容为test.html className: 'ngdialog-theme-plain', scope:$scope //将scope传给test.html,以便显示地址详细信息 }); }; }])
test.html(读取scope中的address并显示,表格样式采用bootstrap )
<table class="table"> <thead> <tr> <th> 收件人姓名 </th> <td> {{address.name}} </td> </tr> <tr> <th> 收件地址 </th> <td> {{address.content}} </td> </tr> <tr> <th> 手机号 </th> <td> {{address.phone}} </td> </tr> </thead> </table>
user.html (显示用户的信息,当地址不为空时,显示详细地址按钮,并点击按钮时,调用controller中的clickToAddress函数)
全选<button href="javascript:void(0);" _xhe_href="javascript:void(0);" class="copyCode btn btn-xs" data-clipboard-text="" <div>="" "="" data-toggle="tooltip" data-placement="top" title="" style="color: rgb(255, 255, 255); font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.5; margin: 0px 0px 0px 5px; overflow: visible; cursor: pointer; vertical-align: middle; background-image: none; border: 1px solid transparent; white-space: nowrap; padding-right: 5px; padding-left: 5px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; -webkit-user-select: none; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-color: rgba(0, 0, 0, 0.74902);">复制放进笔记[code]<div> <div class="panel panel-warning"> <div class="panel-heading"> 用户管理 </div> <div class="row"> <div class="col-lg-8"></div> <div class="col-lg-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..." ng-model='search'> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> <table class="table"> <thead> <th>姓名</th> <th>余额 <span class="glyphicon glyphicon-flash" aria-hidden="true"> </span></th> <th>头像</th> <th>默认地址</th> <th>操作</th> </thead> <tbody> <tr ng-repeat="user in user | filter : search" > <td>{{user.userName}}</td> <td>{{user.residualPayment}}</td> <td ng-if="user.url != 'undefined' ">{{user.url}}</td> <td ng-if="user.url == 'undefined' ">系统默认头像</td> <td ng-if="user.address.length == 0 ">暂无默认地址</td> <td ng-if="user.address.length != 0"ng-repeat="address in user.address " ng-click="clickToAddress(address)"> <button type="button" class="btn btn-info navbar-btn">详细地址</button> </td> <td> <button type="button" class="btn btn-warning navbar-btn" ng-click="remove(user._id)">删除</button> </td> </tr> </tbody> </table> </div> </div>
相关文章推荐
- AngularJS 基础点
- 探索angularjs+requirejs全面实现按需加载的套路
- [转]AngularJS 之 Factory vs Service vs Provider
- :angularjs学习总结(~~很详细的教程) 很不错的一篇帖子 适合快速了解angularjs整体结构 有个整体印象
- angularJs中图表功能-angular-flot
- angularJS项目开发需要下载安装和配置的环境
- angular-flot学习总结
- angular-flot学习总结
- 探索angularjs+requirejs全面实现按需加载的套路
- AngularJS 之 ngGrid
- 【AngularJS学习笔记】01 指令、服务和过滤器
- #学习笔记#(46)6步搭建Angular项目
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
- AngularJS 与 RequireJs 集成
- AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
- AngularJS常见问题答疑
- angularJs - cynthia娆墨旧染-响应式文章发布系统