在ng中动态添加类重复
dynamically adding classes in ng-repeat
我是angular的新手,在这个问题上遇到了困难。我正在使用砖石来构建一个动态的图像和视频集合,并希望将我用于图像的大小类随机化。也就是说,如果ng重复中的一个项目是一个图像,则对其应用两个类中的一种。
到目前为止,我有这个模板:
<div class="modalVid" ng-repeat="m in mediaList | filter:mediaType track by $index">
<a ng-if="m.type=='video'" zf-open="basicModal_{{$index}}" class="grid-item grid-item--video" ng-click="modalOpen()" style="background-image: url({{m.thumb}}); background-size: cover; background-repeat:no-repeat;"></a>
<a ng-if="m.type=='image'" zf-open="basicModal_{{$index}}" ng-class="grid-item" random-class ng-click="modalOpen()" style="background-image: url({{m.thumb}}); background-size: cover; background-repeat:no-repeat;"></a>
<div ng-if="m.type=='video'" class="" zf-modal="" id="basicModal_{{$index}}">
<iframe width="560" height="315" ng-src="{{iFrameSrc(v.videoid)}}" frameborder="0" allowfullscreen></iframe>
</div>
<div ng-if="m.type=='image'" zf-modal="" class="large" id="basicModal_{{$index}}">
<img src="{{m.screenshot}}">
</div>
我正在使用一个名为随机类的指令来插入类:
angular.module('mfApp')
.directive('randomClass', randomClass);
function randomClass(){
return {
restrict: 'AE',
require:'^mfMason',
link: function(scope, elem, attrs){
var classArr = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
var newClass = classArr[Math.floor(Math.random() * classArr.length)];
elem.addClass(newClass);
}
}
}
砖石包装本身就是一个指令:
angular.module('mfApp')
.directive('mfMason', mfMason);
function mfMason(){
return{
restrict: 'AE',
transclude:true,
templateUrl: 'templates/masonry_build.html',
controller:function($scope){
$scope.classes = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
},
link: function(scope, elem, attr){
var $grid = $('.grid').imagesLoaded(function(){
$grid.isotope({
itemSelector: '.grid-item',
columnWidth: 182,
gutter:1
});
});
}
};
}
遗憾的是,它不起作用。我尝试过使用其他问题的一些解决方案,例如在ng repeat中动态添加指令,但没有效果。很明显,Angular有很多我不理解的地方,比如指令等,所以任何帮助都将不胜感激。谢谢
require:'^mfMason'
正在查找名为mfMason
的控制器,但您有一个名为mfMason
的指令。尝试从randomClass
指令中删除require:'^mfMason',
,然后看看它是否有效。
我很惊讶你在控制台中没有看到关于这方面的错误。
更新下面是一个示例JSFiddle,演示它的工作原理。我将<div>
设置得很宽,并带有边框,以便在Chrome开发工具中更容易右键单击和检查。在随机添加类之后,我还输出了class
属性。
这是javascript:
angular.module('app', [])
.directive('randomClass', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
var classArr = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
var newClass = classArr[Math.floor(Math.random() * classArr.length)];
element.addClass(newClass);
element.text(element.attr('class'));
}
}
});
这是html:
<div ng-app="app">
<div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
<div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
<div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
<div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
<div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
<div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
</div>
相关文章:
- 正在添加动态第二类Jquery
- 如何在javascript而不是jquery中添加动态列表
- 为图例添加动态色彩标签
- 如何在谷歌表单中添加动态字段
- 如何添加动态Id's并在运行时提取它们
- 在 JavaScript 中添加动态文本
- 如何添加动态表单元素但保留其值(JS)
- 使用AngularJs在自定义TinyMCE编辑器中添加动态数据
- 如何使用JavaScript添加动态HTML内容(DIV)
- javascript初学者:在javascript中添加动态样式
- 如何使用Javascript在html源中添加动态数据
- 向Uploadify添加动态字段
- 如何在 Vue.js 中添加动态组件/部件
- 锚导航与坚持到顶部菜单..需要向锚点添加动态偏移量
- Javascript:添加动态方法
- 向角度对象添加动态功能
- 添加动态文本框时更新动态高度
- JavaScript 运行时错误:无法在 Windows 8 应用中添加动态内容
- 添加动态点击事件
- 添加动态字段以创建特定的 JSON 格式