data population into the table using ng-repeat in angularJS

Question

data population into the table using ng-repeat in angularJS

414 views Asked by kallaguntam At 23 November 2024 at 20:01

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 answers

**Akshay Kalola** · Accepted Answer · 2017-09-08 14:13:40

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

TechQA.

data population into the table using ng-repeat in angularJS

There are 1 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in POPULATION

Popular Questions

Popular Tags

Trending Questions