JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div ng-app="myApp">
  <div ng-controller="Main">
    {{name}}
    <div class="list">
      <ul>
    <!--   <li ng-repeat="d in dara">{{d.name}}</li> -->
        <li ng-repeat="d in slice1">{{d.name}}</li>
        <li ng-repeat="d in slice2">{{d.name}}</li>
        <li ng-repeat="d in slice3">{{d.name}}</li>
        <li ng-repeat="d in slice4">{{d.name}}</li>
      </ul>
    </div>
  </div>
</div>

JavaScript

var app = angular.module("myApp", []);

app.controller("Main", ["$scope","$timeout", function($scope,$timeout){
	$scope.name = "Welcome";
  var start = new Date();
  $timeout(function(){
  	$scope.data = [
    {"name":"name1"},{"name":"name2"},{"name":"name3"},{"name":"name4"},	{"name":"name5"},{"name":"name6"},{"name":"name7"},{"name":"name8"},{"name":"name9"},{"name":"name10"},{"name":"name11"},{"name":"name12"},{"name":"name13"},{"name":"name14"},{"name":"name15"},{"name":"name16"},{"name":"name17"},{"name":"name18"},{"name":"name19"},{"name":"name20"}
  ]
  }, 100);
  console.log( "first", new Date() - start );
  
 $scope.slice1 = $scope.data.splice(0,5);
 $scope.slice2 = $scope.data.splice(0,5);
 $scope.slice3 = $scope.data.splice(0,5);
 $scope.slice4 = $scope.data.splice(0,5);

	console.log( $scope.slice4 );
  
}]);