Javascript 在网格内重复ng-A-Licious网格
我正在使用Grid-A-Licious插件 我的标记如下:Javascript 在网格内重复ng-A-Licious网格,javascript,jquery,angularjs,angularjs-ng-repeat,Javascript,Jquery,Angularjs,Angularjs Ng Repeat,我正在使用Grid-A-Licious插件 我的标记如下: <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"> <
<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>
我遇到的问题是,我的网格内容绑定到我的视图模型,并且将根据其他条件动态更改—实际上是服务调用的结果。
这会导致栅格外观错误
有没有办法,每次网格元素绑定到的模型属性发生更改时,我都可以调用上述选择器?
这样做是否完全违背了angularJS的惯例
提前多谢你可以用手表来实现你的目标。但是,请注意,这应该在指令中处理,而不是在控制器中处理,但为了使这成为一个更简短、更直接的答案,我将使用控制器示例:
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);
}]);
免责声明:不建议从您的控制器修改视图,也不是角度方式。我认为这些行动应该转变为一项指令
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);
}]);