data population into the table using ng-repeat in angularJS

465 Views Asked by kallaguntam At 08 September 2017 at 09:57

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.

Original Q&A

There are 1 best solutions below

Akshay Kalola On 08 September 2017 at 14:13 BEST ANSWER

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

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in POPULATION

Trending Questions

Popular # Hahtags

Popular Questions