Javascript ng重复需要角度方向吗?
对于ng repeat指令,我有一点复杂的结构,我在循环时被卡住了。我只是在数组中发布数据表示 JSON格式Javascript ng重复需要角度方向吗?,javascript,angularjs,angularjs-ng-repeat,angular-ng-if,Javascript,Angularjs,Angularjs Ng Repeat,Angular Ng If,对于ng repeat指令,我有一点复杂的结构,我在循环时被卡住了。我只是在数组中发布数据表示 JSON格式 {"data":[ ["sameer","1001", [ {"button_icon":"fa fa-pencil", "button_tt":"create invoice", "button_color":"btn-success" },
{"data":[
["sameer","1001",
[
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-success"
},
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-danger"
}
]
],
["jack","1002",
[
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-success"
},
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-danger"
}
]
]
}
它是一个数组(array(array())),最后一个内部数组是一个按钮,它将与每一行一起追加。我在附加那个按钮时卡住了。我已经在使用嵌套的ng repeat,但对于第三个,我感到困惑
这是我的html
<tbody>
<tr ng-repeat = "row in list.data">
<td ng-if = "(row.length - 1) != $index" class="text-center" ng-repeat = "val in row track by $index" ng-cloak>{{val}}</td>
<td ng-if = "(row.length - 1) == $index" class="text-center">
<div class="btn-group" ng-cloak>
<a ng-repeat = "btn in row" data-toggle="tooltip" title="{{btn.button_tt}}" class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i class="{{btn.button_icon}}"></i></a>
</div>
</td>
</tr>
{{val}}
我相信您还需要一个循环 列表中的
行中的行。数据为第一级:
["sameer","1001",
[
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-success"
},
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-danger"
}
]
]
btn
在行中的btn
是第二级,也是一个数组:
[
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-success"
},
{"button_icon":"fa fa-pencil",
"button_tt":"create invoice",
"button_color":"btn-danger"
}
]
您应该像这样添加第三个级别:
<div class="btn-group" ng-cloak>
<div ng-repeat = "innerRow in row">
<a ng-repeat = "btn in innerRow" data-toggle="tooltip" title="{{btn.button_tt}}" class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i class="{{btn.button_icon}}"></i></a>
</div>
</div>
希望对您有所帮助
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="row in data.data">
<td ng-if="(row.length - 1) != $index" class="text-center" ng-repeat="val in row track by $index" ng-cloak>
{{val}}
</td>
<td ng-if="(row.length - 1) == $index" class="text-center">
<div class="btn-group" ng-cloak>
<div ng-repeat="innerRow in row">
<a ng-repeat="btn in innerRow" data-toggle="tooltip" title="{{btn.button_tt}}"
class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i
class="{{btn.button_icon}}"></i></a>
</div>
</div>
</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = {
"data": [
[ "sameer", "1001",
[
{
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-success"
},
{
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-danger"
}
]
],
[ "jack", "1002",
[
{
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-success"
},
{
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-danger"
}
]
]
]
};
});
</script>
</body>
{{val}}
var-app=angular.module('myApp',[]);
应用程序控制器('myCtrl',函数($scope){
$scope.data={
“数据”:[
[“sameer”,“1001”,
[
{
“按钮图标”:“fa fa pencil”,
“按钮”:“创建发票”,
“按钮颜色”:“btn成功”
},
{
“按钮图标”:“fa fa pencil”,
“按钮”:“创建发票”,
“按钮颜色”:“btn危险”
}
]
],
[“杰克”,“1002”,
[
{
“按钮图标”:“fa fa pencil”,
“按钮”:“创建发票”,
“按钮颜色”:“btn成功”
},
{
“按钮图标”:“fa fa pencil”,
“按钮”:“创建发票”,
“按钮颜色”:“btn危险”
}
]
]
]
};
});
这是演示
Js
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.list = {
"data": [
["sameer", "1001", [{
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-success"
}, {
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-danger"
}]],
["jack", "1002", [{
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-success"
}, {
"button_icon": "fa fa-pencil",
"button_tt": "create invoice",
"button_color": "btn-danger"
}]]
]
};
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<div ng-repeat="row in list.data">
{{row[0]}} {{row[1]}}
<a href='#' ng-repeat='btn in row[2]'> {{btn.button_icon}} {{btn.button_tt}} {{btn.button_color}} <br></a>
<hr>
</div>
</div>
</div>
{{row[0]}{{row[1]}
希望这对你有所帮助你能提供一个合适格式的打捞器吗请提供一个打捞器。谢谢你,伙计。你给了我一个对我有用的暗示。再次感谢你。