JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
    <button ng-click="toggleAll(ideas)">show/hide descriptions</button>
    <div>
        <div ng-repeat="idea in ideas">
            <h2>{{idea.title}}</h2>
            <p ng-click="toggle(idea)">{{idea.description | descLimit: maxIdeaDescLength : idea.expanded}}</p>
        </div>
    </div>
</div>

JavaScript

angular.module('demoApp', [])
	.constant('appConst', {
    	maxIdeaDescLength: 50,
    	expandedDefault: false
	})
	.filter('descLimit', descLimitFilter)
	.controller('MainController', MainController);

function descLimitFilter($filter) {
	return function(input, len, expanded, ellipsesChars) {
        var ellipses = ellipsesChars || '...';
    	return expanded? input : $filter('limitTo')(input, len) + ellipses;
    }
}

function MainController($scope, $http, appConst) {
    $scope.maxIdeaDescLength = appConst.maxIdeaDescLength;
    $scope.toggle = toggle;
    $scope.toggleAll = toggleAll;
    
    var globalDisplay = appConst.expandedDefault; // hide all by default;
    
    activate();
    
	function activate() {
        $http.jsonp('http://www.mocky.io/v2/562172d11200003953011432?callback=JSON_CALLBACK')
            .then(function(response) {
                $scope.ideas = response.data;
                //console.log(response.data);
            	setExpandedAll($scope.ideas, globalDisplay);
        });
    }
    
    function toggle(item) {
    	item.expanded = !item.expanded;
    }
    
    function toggleAll(items) {
        globalDisplay = !globalDisplay;
    	setExpandedAll(items, globalDisplay);
    }
    
    function setExpandedAll(items, state) {
    	angular.forEach(items, function(item) {
        	item.expanded = state;
        });
    }
}