Javascript 如何将tab变量设置为angular js变量
我正在尝试循环浏览我的动态应用程序内容。我有一个网格，可以重复使用ng repeat来制作瓷砖。当您单击动态创建的互动程序时，我想将单击的互动程序内容分配给选项卡值，这样当id为='fullscreen'的div最大化为全屏视图时，它就拥有所单击互动程序的内容。我去掉了所有多余的代码。这是相关代码Javascript 如何将tab变量设置为angular js变量,javascript,jquery,html,angularjs,css,Javascript,Jquery,Html,Angularjs,Css,我正在尝试循环浏览我的动态应用程序内容。我有一个网格，可以重复使用ng repeat来制作瓷砖。当您单击动态创建的互动程序时，我想将单击的互动程序内容分配给选项卡值，这样当id为='fullscreen'的div最大化为全屏视图时，它就拥有所单击互动程序的内容。我去掉了所有多余的代码。这是相关代码 #JS (function(){ var app = angular.module('userProfile', [ ]); app.controller('ProfileController',
#JS
(function(){
var app = angular.module('userProfile', [ ]);
app.controller('ProfileController', function($scope){
this.userPost = user_post;
this.user = username;
this.setTab = function(clickedTab){
this.tab = clickedTab;
}
});
var username = {
username:'Grant',
tagline:'Whats up yo',
}
var user_post = [
{
title: 'test1',
message: 'this is a post',
hide:false,
image: 'images/pic05.jpg',
animated:true,
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test3',
message: 'this is a post3 with a lot of data to see if it exampes',
hide:false,
image: 'images/pic07.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
},
{
title: 'test2',
message: 'this is a post2',
hide:false,
image: 'images/pic06.jpg',
}
]
})();
#HTML
<html>
<head>
<title>Relic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<style>
</style>
<script>
$(document).ready(function() {
$('.hide_div').hide();
$('.tile').click(function(){
/**
* when show button is clicked we call the show plugin
* which scales the box to default size
* You can try other effects from here: http://jqueryui.com/effect/
*/
$(".hide_div").show("scale", 500);
});
$('.tile').click(function(){
//same thing happens except in this case we hide the element
$(".hide_div").hide("scale", 500);
});
$(function(){
var timer = setInterval(tileSwitch, 5000);
function tileSwitch(){
$('.tile-container').toggleClass('active-tile');
}
});
});
document.write('<base href="' + document.location + '" />');
</script>
</head>
<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="content">
<div class="tile-container" ng-repeat="userpost in post.userPost" >
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<img src="http://www.charmed-designs.co.uk/files/2013/06/sunny.png" class="weather-image">
<div class="weather-text">
<span class="location">{{userpost.title}}</span>
</div>
</div>
<div class="tile" style="background-image: url('{{userpost.image}}');" ng-click="post.setTab(userpost.message)">
<img src="http://www.charmed-designs.co.uk/files/2013/06/rainy.png" class="weather-image">
<div class="weather-text">
<span class="temperature">{{userpost.message}}</span>
</div>
</div>
</div>
<div id='fullscreen' class='hide_div'>{{tab}} test</div>
</div>
</body>
</html>
#CSS
body{
background: url(../images/banner.jpg);
background-size: 2000px 2000px;
background-repeat: no-repeat;
}
#content{
top:55px;
position:absolute;
margin:0px;
left:25px;
}
#fullscreen{
top:48px;
position:absolute;
width:100%;
height:100%;
background:#000;
color: #FFF;
opacity: .5;
}
.tile-container{
float:left;
margin:5px;
width:300px;
height:200px;
overflow:hidden;
-webkit-box-shadow: 10px -1px 101px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px -1px 101px 0px rgba(0,0,0,0.75);
box-shadow: 10px -1px 101px 0px rgba(0,0,0,0.75);
}
.tile-container:hover{
-webkit-transform: translate(50%);
-moz-transform: translate(50%);
-o-transform: translate(50%);
transform: translate(50%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.1);
}
.tile-container:hover > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
}
.tile{
background:inherit;
width:inherit;
height:inherit;
float:left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding:10px;
}
/*
.active-tile > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
}
*/
/*
.tile-container{
width:150px;
height:150px;
background:#2c87ef;
overflow:hidden;
-webkit-box-shadow: 10px -1px 101px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px -1px 101px 0px rgba(0,0,0,0.75);
box-shadow: 10px -1px 101px 0px rgba(0,0,0,0.75);
}
.tile-container:hover{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.1);
}
.tile-container:hover > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.1);
}
.tile{
background:inherit;
width:inherit;
height:inherit;
float:left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding:10px;
}
.active-tile > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
}
*/
#JS
（功能（）{
var app=angular.module（'userProfile'，[]）；
app.controller（'ProfileController'，函数（$scope）{
this.userPost=user\u post；
this.user=用户名；
this.setTab=函数（单击选项卡）{
this.tab=单击选项卡；
}
});
变量用户名={
用户名：'Grant'，
标语：“你怎么了？”，
}
var user_post=[
{
标题：“test1”，
信息：“这是一篇帖子”，
隐藏：错，
图片：“images/pic05.jpg”，
是的，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test3”，
信息：“这是一个post3，有很多数据要看它是否正确”，
隐藏：错，
图片：“images/pic07.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
},
{
标题：“test2”，
信息：“这是一篇博文2”，
隐藏：错，
图片：“images/pic06.jpg”，
}
]
})();
#HTML
遗迹
$（文档）.ready（函数（）{
$（'.hide_div'）.hide（）；
$（'.tile'）。单击（函数（）{
/**
*单击show按钮时，我们称之为show插件
*它将长方体缩放为默认大小
*您可以在此尝试其他效果：http://jqueryui.com/effect/
*/
$（“.hide_div”）.show（“比例”），500；
});
$（'.tile'）。单击（函数（）{
//除了在本例中隐藏元素外，其他情况也会发生
$（“.hide_div”）.hide（“比例”），500；
});
$（函数（）{
var定时器=设置间隔（tileSwitch，5000）；
函数tileSwitch（）{
$（'.tile container'）.toggleClass（'active-tile'）；
}
});
});
文件。写（“”）；
切换导航
{{userpost.title}
{{userpost.message}
{{tab}}测试
#CSS
身体{
背景：url（../images/banner.jpg）；
背景尺寸：2000px 2000px；
背景重复：无重复；
}
#内容{
顶部：55px；
位置：绝对位置；
边际：0px；
左：25px；
}
#全屏{
顶部：48px；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：#000；
颜色：#FFF；
不透明度：.5；
}
.瓷砖容器{
浮动：左；
保证金：5px；
宽度：300px；
高度：200px；
溢出：隐藏；
-webkit盒阴影：10px-1px101px 0px rgba（0,0,0.75）；
-moz盒阴影：10px-1px101px 0px rgba（0,0,0.75）；
盒影：10px-1px101px 0px rgba（0,0,0,0.75）；
}
.磁贴容器：悬停{
-webkit转换：翻译（50%）；
-moz变换：翻译（50%）；
-o变换：翻译（50%）；
转化：翻译（50%）；
-webkit转换：所有.2易入易出；
-webkit转换：比例（1.1）；
}
.tile容器：悬停>.tile{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
}
.瓷砖{
背景：继承；
宽度：继承；
身高：继承；
浮动：左；
-webkit转换：所有.2易入易出；
-moz转换：所有.2秒的输入输出；
-o-转换：所有.2缓进-缓出；
转换：所有.2易入易出；
填充：10px；
}
/*
.active tile>.tile{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
}
*/
/*
.瓷砖容器{
宽度：150px；
高度：150像素；
背景：#2c87ef；
溢出：隐藏；
-webkit盒阴影：10px-1px101px 0px rgba（0,0,0.75）；
-moz盒阴影：10px-1px101px 0px rgba（0,0,0.75）；
盒影：10px-1px101px 0px rgba（0,0,0,0.75）；
}
.磁贴容器：悬停{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
-webkit转换：所有.2易入易出；
-webkit转换：比例（1.1）；
}
.tile容器：悬停>.tile{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
-webkit转换：所有.2易入易出；
-webkit转换：比例（1.1）；
}
.瓷砖{
背景：继承；
宽度：继承；
身高：继承；
浮动：左；
-webkit转换：所有.2易入易出；
-moz过渡：全部。
$scope.setTab = function(clickedTab){
$scope.tab = clickedTab;
}
<li ng-click='setTab(post.message)' class='show_button'>{{post.title}}{{post.message}}</li>