data population into the table using ng-repeat in angularJS

Question

i have to populate the data into the table using ng-repeat in the td section if the value is number the text should be aligned to right if it is text or alpha numeric it should be at the left of td.

Welcome to StackOverflow. Please add the code that demonstrates what you try to accomplish, what you tried and where you failed. — Günter Zöchbauer, Sep 08 '17 at 10:03
If the question is about "Angular JS 1.x.x" please use the `angularjs` tag. The `angular` tag is for Angular 2 and later. — Günter Zöchbauer, Sep 08 '17 at 10:03

score 0 · Accepted Answer · answered Sep 08 '17 at 14:13

Below is the example which matches your requirement. 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>

Controller

 (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;
    }
  }
}
    }
})();

Sharing the working demo for your reference http://jsbin.com/robovoperu/edit?html,js,console,output

data population into the table using ng-repeat in angularJS

1 Answers1