Html 在div内使用ng repeat可调整外部div的位置

我正在使用AngularJS v1.4.3

我正在用JSON数据制作一个简单的过滤系统，其输出根据用户选择的类别而变化

我使用ng repeat在JSON对象中显示数组元素。每个对象都有一个attrs数组属性。但是，有些attrs数组有两个元素，有些有三个元素

以下是HTML代码的相关部分：

<div class="cards">
    <div ng-repeat="card in cards | filter:itemFilter" class="card_background">
        <div class="card_title">{{card.name | uppercase}}</div> 
        <div class="card_properties">
                <div ng-repeat="attr in card.attrs">{{attr}}</div>
        </div>
    </div>
</div>

以下是一些示例JSON数据：

$scope.cards = [
    { name: 'Sniper',       attrs: ['shooting', 'dribbling'] },
    { name: 'Finisher',     attrs: ['shooting', 'physical'] },
    { name: 'Deadeye',      attrs: ['shooting', 'passing'] },
    { name: 'Marksman',     attrs: ['shooting', 'dribbling', 'physical'] },
    { name: 'Hawk',         attrs: ['pace', 'shooting', 'physical'] },
    ...

如您所见，{{attr}}行是列出attr的行。而且，由于它在某些情况下进行两次div，在其他情况下进行三次div，因此根据卡的不同，对齐方式不一致：

处理此问题的有效方法是什么？

添加垂直对齐：顶部；到您的.card_背景选择器

角度。模块“化学”[] .controller'MainCtrl'，函数$scope，$http{ //试图从单独的文件中获取json //$http.get'cards.json' //.Then函数结果{ //$scope.cards2=result.data； // }; //共18个 $scope.cards=[{ 名字：“狙击手”， 属性：[“投篮”、“运球”] }, { 名称：'Finisher'， 属性：['射击'，'身体'] }, { 名字：“死神”， 属性：[“射门”、“传球”] }, { 姓名：'神枪手'， 属性：[“投篮”、“运球”、“体能”] }, { 名字：“鹰”， 属性：[“速度”、“射击”、“身体”] }, { 姓名：'艺术家'， 属性：[“传球”、“运球”] }, { 姓名：'建筑师'， 属性：[“传递”、“物理”] }, { 名称：“发电站”， 属性：[“传球”、“防守”] }, { 名称：“大师”， 属性：[“投篮”、“传球”、“运球”] }, { 名称：“引擎”， 属性：[“配速”、“传球”、“运球”] }, { 名称：“哨兵”， 属性：[“防御”、“物理”] }, { 姓名：'监护人'， 属性：[“运球”、“防守”] }, { 名字：'角斗士'， 属性：[“射击”、“防守”] }, { 名称：'主干'， 属性：[‘传球’、‘防守’、‘身体’] }, { 名称：'锚'， 属性：[“速度”、“防守”、“体能”] }, { 姓名：'猎人'， 属性：[“速度”，“射击”] }, { 名称：'催化剂'， 属性：[“配速”、“传球”] }, { 名称：'影子'， 属性：[“速度”，“防守”] }]; $scope.options=[{ 名称：'pace'， 所选：false }, { 名称:"射击",， 所选：false }, { 名称：'通过'， 所选：false }, { 名称：“运球”， 所选：false }, { 名称：'防守'， 所选：false }, { 名称：'物理'， 所选：false }]; $scope.itemFilter=函数项{ 变量过滤器=$scope.options.filterfunction元素，idx，数组{ 返回元素。已选择； } || []; var匹配=真； filters.forEachfunction选项{ matched=matched&&item.attrs.indexOfoption.name>=0； } 返回匹配； }; }; @进口urlhttp://fonts.googleapis.com/css?family=Exo:200; @进口urlhttp://fonts.googleapis.com/css?family=Exo:500; @进口urlhttp://fonts.googleapis.com/css?family=Exo:300; @进口urlhttp://fonts.googleapis.com/css?family=Exo:700; 身体{ 背景图片：url'fifa_background_image.jpg'； 背景色：黑色； 背景附件：固定； 颜色：白色； 字体系列：'Exo'，无衬线； 字号：200； } .主标题{ 保证金：自动； 宽度：50%； 填充：10px； /*文本设置*/ 字母间距：-1px； 颜色：ffcc00； 文本对齐：居中； 字体系列：'Exo'，无衬线； 字号：500； 字体大小：300%； } .副标题{ 颜色：DCDC； 文本对齐：居中； } .options\u容器{ 保证金：自动； 填充物：5px； } .选择权{ 显示：内联块； /*文本设置*/ 颜色：DCDC； /*浅灰色*/ 字体大小：300； 字体大小：200%； 填充：10px； /*防止单击时突出显示div*/ -webkit用户选择：无； } .选项：悬停{ -webkit转换：0.3s； 颜色：白色； } /*给类别文本上色*/ ：选中+跨距{ -webkit转换：0.1s； 颜色：ffcc00； 文本阴影：0px 0px 30px灰色； } .检查{ /*这个元素是隐藏的*/ 宽度：0%； 可见性：隐藏； } .卡片{ 显示：内联块； } .card_背景{ 边界半径：5px； 边框：2件纯黑； 宽度：130px； 高度：150像素； 背景色：DBC282； 利润率：20px； 填充：20px； 显示：内联块； /*文本设置*/ 颜色：黑色； 垂直对齐：顶部； } .card_title{ 字母间距：-1px； 字体大小：140%； 文本对齐：居中； } .card_属性{ 文本转换：大写； } 化学 磁卡 化学风格发现者 选择要筛选卡片的类别 {{option.name |大写}} {{card.name |大写}} {{attr}}

---

我使用的不是.card_背景中的display:inline block，而是float left。 请尝试以下代码段：

角度。模块“化学”[] .controller'MainCtrl'，函数$scope，$http{ //试图从单独的文件中获取json //$http.get'cards.json' //.Then函数结果{ //$scope.cards2=result.data； // }; //共18个 $scope.cards=[{ 名字：“狙击手”， 属性：[“投篮”、“运球”] }, { 名称：'Finisher'， 属性：['射击'，'身体'] }, { 名字：“死神”， 属性：[“射门”、“传球”] }, { 姓名：'神枪手'， 属性：[“投篮”、“运球”、“体能”] }, { 名字：“鹰”， 属性：[“速度”、“射击”、“身体”] }, { 姓名：'艺术家'， 属性：[“传球”、“运球”] }, { 姓名：'建筑师'， 属性：[“传递”、“物理”] }, { 名称：“发电站”， 属性：[“传球”、“防守”] }, { 名称：“大师”， 属性：[“投篮”、“传球”、“运球”] }, { 名称：“引擎”， 属性：[“配速”、“传球”、“运球”] }, { 名称：“哨兵”， 属性：[“防御”、“物理”] }, { 姓名：'监护人'， 属性：[“运球”、“防守”] }, { 名字：'角斗士'， 属性：[“射击”、“防守”] }, { 名称：'主干'， 属性：[‘传球’、‘防守’、‘身体’] }, { 名称：'锚'， 属性：[“速度”、“防守”、“体能”] }, { 姓名：'猎人'， 属性：[“速度”，“射击”] }, { 名称：'催化剂'， 属性：[“配速”、“传球”] }, { 名称：'影子'， 属性：[“速度”，“防守”] }]; $scope.options=[{ 名称：'pace'， 所选：false }, { 名称:"射击",， 所选：false }, { 名称：'通过'， 所选：false }, { 名称：“运球”， 所选：false }, { 名称：'防守'， 所选：false }, { 名称：'物理'， 所选：false }]; $scope.itemFilter=函数项{ 变量过滤器=$scope.options.filterfunction元素，idx，数组{ 返回元素。已选择； } || []; var匹配=真； filters.forEachfunction选项{ matched=matched&&item.attrs.indexOfoption.name>=0； } 返回匹配； }; }; @进口urlhttp://fonts.googleapis.com/css?family=Exo:200; @进口urlhttp://fonts.googleapis.com/css?family=Exo:500; @进口urlhttp://fonts.googleapis.com/css?family=Exo:300; @进口urlhttp://fonts.googleapis.com/css?family=Exo:700; 身体{ 背景图片：url'fifa_background_image.jpg'； 背景色：黑色； 背景附件：固定； 颜色：白色； 字体系列：'Exo'，无衬线； 字号：200； } .主标题{ 保证金：自动； 宽度：50%； 填充：10px； /*文本设置*/ 字母间距：-1px； 颜色：ffcc00； 文本对齐：居中； 字体系列：'Exo'，无衬线； 字号：500； 字体大小：300%； } .副标题{ 颜色：DCDC； 文本对齐：居中； } .options\u容器{ 保证金：自动； 填充物：5px； } .选择权{ 显示：内联块； /*文本设置*/ 颜色：DCDC； /*浅灰色*/ 字体大小：300； 字体大小：200%； 填充：10px； /*防止单击时突出显示div*/ -webkit用户选择：无； } .选项：悬停{ -webkit转换：0.3s； 颜色：白色； } /*给类别文本上色*/ ：选中+跨距{ -webkit转换：0.1s； 颜色：ffcc00； 文本阴影：0px 0px 30px灰色； } .检查{ /*这个元素是隐藏的*/ 宽度：0%； 可见性：隐藏； } .卡片{ 显示：内联块； } .card_背景{ 边界半径：5px； 边框：2件纯黑； 宽度：130px； 高度：150像素； 背景色：DBC282； 利润率：20px； 填充：20px； /*显示：内联块*/ 浮动：左； /*文本设置*/ 颜色：黑色； } .card_title{ 字母间距：-1px； 字体大小：140%； 文本对齐：居中； } .card_属性{ 文本转换：大写； } 化学卡片 化学风格发现者 选择要筛选卡片的类别 {{option.name |大写}} {{card.name |大写}} {{attr}}

---

这就是CSS问题。只需添加垂直对齐规则：从顶部到.card_背景

工作演示：

$scope.cards = [
    { name: 'Sniper',       attrs: ['shooting', 'dribbling'] },
    { name: 'Finisher',     attrs: ['shooting', 'physical'] },
    { name: 'Deadeye',      attrs: ['shooting', 'passing'] },
    { name: 'Marksman',     attrs: ['shooting', 'dribbling', 'physical'] },
    { name: 'Hawk',         attrs: ['pace', 'shooting', 'physical'] },
    ...