- 首页
- 前端开发
- Grid-A-Licious Grid 中的 ng-repeat
Grid-A-Licious Grid 中的 ng-repeat
[英] ng-repeat within Grid-A-Licious Grid
本文介绍了Grid-A-Licious Grid 中的 ng-repeat的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Grid-A-Licious 插件 (http://suprb.com/apps/gridalicious/).
我的标记如下:
<h2 class="main-heading bottom-line"><span class="main-circle-icon"><i class="icon-building"></i></span>您周围的房产</h2><div class="featured-grid right-space"><div class="box-white"><div class="grid-item grid-style-properties"><div class="item" ng-repeat="m in map.dynamicMarkers"><a href="#" class="with-hover"><div class="for_rent_banner"></div><img alt='images' src="data:image/png;base64,{{m.bigimage}}" width="200px" class="full"/><span class="mask_hover"></span></a><h4 class=" ">{{m.title}}</h4><div class="preview-properties"><div class="box-detail"><p class="text-center short-detail"><span class="label"><i class="icon-circle-arrow-right"></i>浴:2</span><span class="label"><i class="icon-circle-arrow-right"></i>床位:2</span><span class="label"><i class="icon-circle-arrow-right"></i>池:2</span><span class="price">$380,000</span></p><div class="clearfix"><a href="#" class="btn-proper btn btn-small pull-left">查看详情</a><a href="#" class="btn-proper btn btn-small pull-right">比较</a>
正如您在网格内部所看到的，我有一个 ng-repeat 属性，它绑定到我的视图模型.
我遇到的问题是 Grid-A-Licious 需要在 document.ready() 上运行以下代码:
$(".grid-item").gridalicious({宽度:250，天沟:10，动画:真实，效果:'淡入淡出'});$(".grid-galeries").gridalicious({宽度:240，天沟:10，动画:真实，效果:'淡入淡出'});
我遇到的问题是我的网格的内容绑定到我的视图模型，并且会根据其他条件动态变化(它实际上是服务调用的结果).这会导致网格外观错误.
有什么办法，我可以调用上面的选择器，每次网格元素绑定的模型属性发生变化时?这样做是否完全违反了 angularJS 约定?
非常感谢
解决方案
您可以使用 watch 来实现您的目标.但是，请注意，这应该在 Directive 中处理，而不是在控制器中处理，但为了使其成为一个简短(更直接)的答案，我将使用控制器示例:
app.controller('myCtrl',['$scope',function($scope){严格使用"；$scope.map.dynamicMarkers= [{/*一些我们不知道的对象*/}];$scope.$watch("map.dynamicMarkers",function(newValue, oldValue, scope){$(".grid-item").gridalicious({宽度:250，天沟:10，动画:真实，效果:'淡入淡出'});$(".grid-galeries").gridalicious({宽度:240，天沟:10，动画:真实，效果:'淡入淡出'});}，真的);}]);
免责声明:不建议从控制器修改视图，也不是角度方式".我认为这些行动应该被移到指令中.
I am using the Grid-A-Licious plugin (http://suprb.com/apps/gridalicious/).
My markup is as follows:
<h2 class="main-heading bottom-line"><span class="main-circle-icon"><i class="icon-building"></i></span>Properties Around you</h2>
<div class="featured-grid right-space">
<div class="box-white">
<div class="grid-item grid-style-properties">
<div class="item" ng-repeat="m in map.dynamicMarkers">
<a href="#" class="with-hover">
<div class="for_rent_banner"></div>
<img alt='images' src="data:image/png;base64,{{m.bigimage}}" width="200px" class="full" /><span class="mask_hover"></span>
</a>
<h4 class=" ">{{m.title}}</h4>
<div class="preview-properties ">
<div class="box-detail">
<p class="text-center short-detail">
<span class="label"><i class="icon-circle-arrow-right"></i>Bath : 2</span>
<span class="label"><i class="icon-circle-arrow-right"></i>Beds : 2</span>
<span class="label"><i class="icon-circle-arrow-right"></i>Pool : 2</span>
<span class="price">$380,000</span>
</p>
<div class="clearfix">
<a href="#" class="btn-proper btn btn-small pull-left">See Detail</a>
<a href="#" class="btn-proper btn btn-small pull-right">Compare</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see inside the grid I have a ng-repeat property which is bound to my view model.
The issue I am encountering, is that Grid-A-Licious requires the following code to be ran on document.ready():
$(".grid-item").gridalicious({
width: 250,
gutter: 10,
animate: true,
effect: 'fadeInOnAppear'
});
$(".grid-galeries").gridalicious({
width: 240,
gutter: 10,
animate: true,
effect: 'fadeInOnAppear'
});
The problem I am having is that the content of my grid is bound to my view model, and will change dynamically depending on other conditions (it is actually the result of a service call).
This results in the grids appearance being wrong.
Is there any way, I can call the above selectors, each time the model property the grid elements are bound to changes?
And does doing this totally go against angularJS conventions?
Many Thanks in advance
解决方案
You can use watch to achieve your goal. However, please note that this should be handled in a Directive and not in a controller but to make this a short(more direct) answer I will use a controller sample:
app.controller('myCtrl',['$scope',function($scope){
"use strict";
$scope.map.dynamicMarkers= [{ /*some object we do not know*/ }];
$scope.$watch("map.dynamicMarkers",function(newValue, oldValue, scope){
$(".grid-item").gridalicious({
width: 250,
gutter: 10,
animate: true,
effect: 'fadeInOnAppear'
});
$(".grid-galeries").gridalicious({
width: 240,
gutter: 10,
animate: true,
effect: 'fadeInOnAppear'
});
},true);
}]);
Disclaimer: The modification of the view from your controller is not recommended nor it is the "angular way". I think these actions should be moved into a directive.
这篇关于Grid-A-Licious Grid 中的 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
