JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<div ng-app="MyApp" ng-controller="DemoController">
  <ul show-more-less min-value="5" max-value="countries.length">
    <h4>By Country</h4>
    <li ng-repeat="country in countries | limitTo:$parent.limit">
      <div>
        {{country}}
      </div>
    </li>
  </ul>
  <ul show-more-less min-value="3" max-value="countries.length">
    <h4>By Country</h4>
    <li ng-repeat="country in countries | limitTo:$parent.limit">
      <div>
        {{country}}
      </div>
    </li>
  </ul>
</div>

JavaScript

// App declaration
var MyApp = angular.module("MyApp", []);
// Demo controller
MyApp.controller("DemoController", ["$scope", function($scope) {
  $scope.countries = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
}]);
MyApp.directive("showMoreLess", function() {
  return {
    restrict: "A",
    replace: false,
    transclude: true,
    scope: {
      min: "@minValue",
      max: "=maxValue"
    },
    template: '<ng-transclude></ng-transclude><a href="" ng-click="showMore()" ng-show="!isShowMore">... Show More</a><a href="javascript:;" ng-click="showLess()" ng-show="isShowMore">... Show Less </a>',
    link: function(scope, ele, attr) {
      scope.limit = parseInt(scope.min);
    },
    controller: function($scope) {
      $scope.showMore = function() {
        $scope.limit = parseInt($scope.max);
        $scope.isShowMore = true;
      };
      $scope.showLess = function() {
        $scope.limit = parseInt($scope.min);
        $scope.isShowMore = false;
      }
    }
  };
});