javascript - 如何将选项卡变量设置为angular js变量

<分区>

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 8 年前。

我正在尝试循环访问我的动态应用程序内容。我有一个网格，它用 ng-repeat 重复制作瓷砖。当您单击那个动态创建的图 block 时，我想将单击的图 block 内容分配给选项卡值，以便当 id='fullscreen' 的 div 最大化到全屏 View 时，它具有被单击的图 block 的内容。我去掉了所有多余的代码。这是相关代码。

#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%);
}


*/

错误:我没有得到错误我只是没有得到变量

最佳答案

避免从您的 View 进行分配，而是在您的范围内使用函数。

在 ProfileController 上，创建如下函数:

$scope.setTab = function(clickedTab){
    $scope.tab = clickedTab;
}

然后在您的 html 上像这样绑定(bind)它:

<li ng-click='setTab(post.message)' class='show_button'>{{post.title}}{{post.message}}</li>

希望对你有帮助

关于javascript - 如何将选项卡变量设置为angular js变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25277597/

上一篇：html - 来自 CSS 的背景图片重复出现

下一篇：javascript - 自定义 jQuery 倒计时 Ruby on Rails

jquery - 为什么通过 ssl 托管在 iis 中的 wcf web 服务。结果是 "403 forbidden"？ Jquery $.post 发送 OPTIONS 动词？

jquery - Tablesorter (mottie fork)/theme bootstrap/headers sorter false => i 类仍然存在

jquery - 滚动上的 anchor 突出显示在 Firefox 中不起作用

php - jQuery html元素动态添加事件处理程序？

javascript - 如何获取浏览器的子窗口数量

javascript - 如何更改 jquery 创建的工具提示的文本？

javascript - jQuery 和行高

php - 选择框中间出现意外的空白选项

javascript - 使用 jQuery 计时器更改 div 的悬停状态