JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <div class="alert alert-warning">      
        <strong>{{badgesEmptyTitle}}</strong> <span>{{badgesEmptyText}}</span>
    </div>
    <ul> 
      <li ng-repeat="badge in badges">{{ badge.title }}</li>
    </ul>
    <button ng-click="emptyBadges()" ng-show="badges.length">Empty Badges</button>
    <button ng-click="fillBadges()" ng-hide="badges.length">Fill Badges</button>
</div>

JavaScript

var myApp = angular.module("myApp",[]);
myApp.controller("myController", function($scope, $sce){
    $scope.badges = [];
    $scope.badgesEmptyTitle = "";
    $scope.badgesEmptyText = "";
    $scope.$watch("badges.length", function(newValue, oldValue){
        if(newValue !== oldValue){
            if(newValue === 0){
                $scope.badgesEmptyTitle = "Empty!";
                $scope.badgesEmptyText = "This Micro_organization has No badges.";
            }else{
                $scope.badgesEmptyTitle = "";
                $scope.badgesEmptyText = "";
            }
        }
    });
    
    
    $scope.emptyBadges = function(){
        $scope.badges = [];
    }
    
    $scope.fillBadges = function(){
        $scope.badges.push({title:"dummyTitle"});
        $scope.badges.push({title:"dummyTitle"});
        $scope.badges.push({title:"dummyTitle"});
        $scope.badges.push({title:"dummyTitle"});
    }
    
    $scope.fillBadges();
});