bootstrap轮播图与现实问题和active使用等
2017-07-31 21:38
369 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
angular.module("myApp",[]).controller("myControl",["$scope",function($scope){
$scope.ReportTypeInit = function(){
//假设营业执照和许可证是从后台传过来的
var bussinessLicense = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1501500166&di=e40436b737b5a4257000c3e6a7da5709&src=http://img.juimg.com/tuku/yulantu/120926/219049-12092612154377.jpg";//营业执照 只能有一张
var Lincense = "http://pic75.nipic.com/file/20150816/21321671_141845130000_2.jpg,http://pic41.nipic.com/20140519/18505720_094740582159_2.jpg,http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=30161d0030292df583cea456d4583615/e1fe9925bc315c609050b3c087b1cb13485477dc.jpg";//许可证 可以有多张
if(!bussinessLicense&&!Lincense){//营业执照许可证都为空，给出提示
//若都为空，提示给用户
}else{
var path1 = []; //存放营业执照
var path2 = []; //存放许可证
path1[0] = bussinessLicense;
var strs = Lincense.split(",");
for(var i=0;i<strs.length;i++){
path2[i] = strs[i];
path2[i].index = i;//记录图片的下表
}
var qcTypeName1 = '营业执照';
var qcTypeName2 = '许可证';
var index1 = 0;//营业执照 //定义两个变量是为了标记是否存在营业执照和许可证
var index2 = 1; //许可证
if(!bussinessLicense){ //这段代码，代表若其中一个为空，让他不显示
qcTypeName1 = null;
path1 = null;
index1 = null;
}else {
index2 = null;
}
if(!Lincense){
qcTypeName2 = null;
path2 = null;
index2 = null;
}
$scope.files = [
{'qcTypeName':qcTypeName1,'qcFilePath':path1,'index':index1},
{'qcTypeName':qcTypeName2,'qcFilePath':path2,'index':index2}
];
}
$('#identifier').modal('show');
for(var i=0;i<$scope.files.length;i++){
$scope.files[i].tab = "tab" + i;
$scope.files[i].tab1 = "tab" + i;
$scope.files[i].carousel = "carousel" + i;
}
}
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="myControl">
<div class="col-md-1" style="margin-right: 6px;">
<button type="submit" class="btn btn-success " ng-click="ReportTypeInit()">
<i class="fa fa-search"></i> 查看
</button>
<div class="modal fade" id="identifier" tabindex="-1" role="identifier" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">查看证照</h4>
</div>
<div class="modal-body">
<div class="portlet-body form-group">
<div class="form-group row">
<div class="form-group col-md-12 ">
<div class="tabbable tabbable-tabdrop">
<ul class="nav nav-tabs" >
<!--
<li class="active" ng-if="qcFileModel">
<a href="enterprise/home.html#/transactionObjectInfo#tab1" data-toggle="tab">{{qcFileModel.qcTypeName}}</a>
</li>
<li ng-if="qcFileModel1">
<a href="enterprise/home.html#/transactionObjectInfo#tab2" data-toggle="tab">{{qcFileModel1.qcTypeName}}
</a>
</li>
-->
<!--
ng-class="{active:($index==file.index)}"
这句代码的意思是，在营业执照和许可证中，必须有一个index为null,就是有一个被选中的状态，这也是在controller里面进行控制，记住这种思想
若存在还有营业执照，许可证，其他的类型，也是一样，值选中一个状态
-->
<li ng-class="{active:($index==file.index)}" ng-repeat="file in files" ng-if="file.qcFilePath!=null">
<a href="test/#{{file.tab}}" data-toggle="tab">{{file.qcTypeName}}</a>
</li>
</ul>
<div class="tab-content">
<!--
<div class="tab-pane active" id="tab1" ng-if="qcFileModel">
<div class="form-group col-md-12">
<div class="form-group col-md-12 ">
<label class="control-label col-md-3">{{qcFileModel.qcTypeName}}：</label>
<div class="col-md-3">
<img ng-src="{{qcFileModel.qcFilePath}}" style="width: 200px;height: 200px;">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2" ng-if="qcFileModel1">
<div class="form-group col-md-12">
<label class="control-label col-md-3">{{qcFileModel1.qcTypeName}}：</label>
<div class="col-md-3">
<img ng-src="{{qcFileModel1.qcFilePath}}" style="width: 200px;height: 200px;">
</div>
</div>
</div>
-->
<div class="tab-pane " id="tab0" ng-class="{active:(files[0].index==0)}" ng-if="files[0].qcFilePath">
<div class="form-group col-md-12">
<div class="form-group col-md-12 ">
<label class="control-label col-md-3">{{files[0].qcTypeName}}：</label>
<div class="col-md-3">
<img ng-src="{{files[0].qcFilePath[0]}}" style="width: 200px;height: 200px;">
<!--<div id="my" class="carousel slide" style="width: 200px;height: 200px;">-->
<!--<!– 轮播（Carousel）项目 –>-->
<!--<div class="carousel-inner" >-->
<!--<div class="item active" >-->
<!--<img ng-src={{file.qcFilePath[0]}} style="width: 200px;height: 200px;" alt="1">-->
<!--</div>-->
<!--</div>-->
<!--<!– 轮播（Carousel）导航 –>-->
<!--<a href="../#my" style="padding:100px 0px 0px 0px " class="carousel-control left"-->
<!--data-slide="prev">‹</a>-->
<!--<a href="../#my" style="padding:100px 0px 0px 0px " class="carousel-control right"-->
<!--data-slide="next">›</a>-->
<!--</div>-->
</div>
</div>
</div>
</div>
<!--
ng-class="{active:(files[1].index==1)}"
和上面的ng-class是一样的意思
-->
<div class="tab-pane" ng-class="{active:(files[1].index==1)}" id="tab1" ng-if="files[1].qcFilePath" >
<div class="form-group col-md-12">
<label class="control-label col-md-3">{{files[1].qcTypeName}}：</label>
<!--<div class="col-md-3">-->
<!--<img ng-src="{{file.qcFilePath}}" style="width: 200px;height: 200px;">-->
<!--</div>-->
<div class="col-md-3">
<div id="my1" class="carousel slide" style="width: 200px;height: 200px;">
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" >
<!--<div class="item" ng-repeat="imgFile in file.qcFilePath" >-->
<!--<img ng-src={{imgFile}} style="width: 200px;height: 200px;" >-->
<!--</div>-->
<!--<div class="item active" >-->
<!--<img ng-src={{firstImg}} style="width: 200px;height: 200px;" >-->
<!--</div>-->
<div class="item" ng-class="{active:($index==0)}" ng-repeat="item in files[1].qcFilePath">
<img ng-src="{{item}}" style="width: 200px;height: 200px;" >
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a href="../#my1" style="padding:100px 0px 0px 0px " class="carousel-control left"
data-slide="prev">‹</a>
<a href="../#my1" style="padding:100px 0px 0px 0px " class="carousel-control right"
data-slide="next">›</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" >提交</button>
<button type="button" class="btn dark btn-outline" data-dismiss="modal">取消</button>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用bootstrap轮播功能时候,glyphicon图标不显示问题
- 使用bootstrap之轮播插件不自动播放的问题和播放时间间隔的问题解决方法
- 使用ActiveReport for .net 3.0实现Web打印的一些问题
- 关于使用图片轮播插件无法实现效果的问题
- 使用Bootstrap 3开发响应式网站实践02,轮播
- 关于使用图片轮播插件无法实现效果的问题
- 使用 Castle ActiveRecord 开发发现的一些问题
- 使用dsoframer控件出现"Unable to display the inactive document. Click here to reactivate the document."的问题
- 在eclipse下使用bootstrap引用的一些问题
- Bootstrap的模态框中使用kindeditor无法编辑的问题
- Bootstrap后台使用问题汇总（一）
- 当客户端为RemoteAnywhere时Chef-server 使用knife-windows bootstrap的一个问题
- 使用Bootstrap为你的博客园自定义轮播图片
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
- 使用dsoframer控件出现"Unable to display the inactive document. Click here to reactivate the document."的问题 .
- 使用 bootstrap-modal遇到的问题
- 基于webform中使用水晶报表的现实问题（转摘）&showtopic=14318&st=0&#entry81715
- 谈一个现实问题，关于软件开发使用中给用户照成的损失谁来赔偿谁来负责的问题，您怎么看？
- 关于bootstrap中轮播的一些问题
- 使用Visitor模式的现实问题(请教)