在 angularJS 中使用 ng-repeat 将数据填充到 table
data population into the table using ng-repeat in angularJS
我必须在 td 部分使用 ng-repeat 将数据填充到 table 如果值为数字,则文本应右对齐 如果它是文本或字母数字,则应位于td 的左边。
下面是符合您要求的示例。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div
ng-app="myApp"
ng-controller="myCtrl">
<table style="border:1px solid black">
<tr ng-repeat="x in sectionUndecoratedList" style="border:1px solid black">
<td ng-class="x.isNumber ? 'center':'left'">{{ x.activites }}</td>
</tr>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</table>
</div>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
.center {
text-align: center
}
.left {
text-align: left
}
</style>
</body>
</html>
控制器
(function(){
angular
.module('myApp',[])
.controller('myCtrl', Controller);
Controller.$inject = ['$rootScope', '$scope'];
function Controller($rootScope, $scope){
activate();
/**
* @method activate
* @description function to be called when controller is activate
*/
function activate(){
$scope.sectionHeader = 'Activities';
$scope.sectionUndecoratedList = [
{'activites':'demo'},
{'activites':'3'},
{'activites':'test'},
{'activites':'1'}
]
var reg = new RegExp('^[0-9]$');
for (var i = 0; i < $scope.sectionUndecoratedList.length; i++) {
var a = $scope.sectionUndecoratedList[i];
if(reg.test(a.activites)){
a.isNumber = true;
}
}
}
}
})();
分享工作演示供您参考http://jsbin.com/robovoperu/edit?html,js,console,output
我必须在 td 部分使用 ng-repeat 将数据填充到 table 如果值为数字,则文本应右对齐 如果它是文本或字母数字,则应位于td 的左边。
下面是符合您要求的示例。 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div
ng-app="myApp"
ng-controller="myCtrl">
<table style="border:1px solid black">
<tr ng-repeat="x in sectionUndecoratedList" style="border:1px solid black">
<td ng-class="x.isNumber ? 'center':'left'">{{ x.activites }}</td>
</tr>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</table>
</div>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
.center {
text-align: center
}
.left {
text-align: left
}
</style>
</body>
</html>
控制器
(function(){
angular
.module('myApp',[])
.controller('myCtrl', Controller);
Controller.$inject = ['$rootScope', '$scope'];
function Controller($rootScope, $scope){
activate();
/**
* @method activate
* @description function to be called when controller is activate
*/
function activate(){
$scope.sectionHeader = 'Activities';
$scope.sectionUndecoratedList = [
{'activites':'demo'},
{'activites':'3'},
{'activites':'test'},
{'activites':'1'}
]
var reg = new RegExp('^[0-9]$');
for (var i = 0; i < $scope.sectionUndecoratedList.length; i++) {
var a = $scope.sectionUndecoratedList[i];
if(reg.test(a.activites)){
a.isNumber = true;
}
}
}
}
})();
分享工作演示供您参考http://jsbin.com/robovoperu/edit?html,js,console,output