JSFiddle - React, Tailwind, and code Playground

by fedorsmirnoff

HTML

<div ng-app="test">
    <div ng-controller="testCtrl">
        <p>Id: {{reservation.id}}</p>
        <p>Name: {{reservation.name}}</p>
        <p>Status: {{reservation.status.value}}</p>
        <menu reservation="reservation"/>
    </div>
</div>

JavaScript

angular.module('test', []).factory('getter', function () {
    return {
        get: function () {
            return {
                id: 1,
                name: "Test reservation",
                status: {
                    "key": "CANCELED",
                    "value": "Canceled"
                }
            };
        }
    };
}).directive('menu', function () {
    return {
        restrict: 'E',
        scope: {
            reservation: '='
        },
        template: '<ul ng-show="showMenu"><li><a href="#/reservation/{{reservation.id}}">View Reservation</a></li></ul>',
        controller: function ($scope) {
            
            if($scope.reservation.status.key == "CANCELED") {
                console.log("Canceled");
                $scope.showMenu = false;
            } else {
                console.log("Active");
                $scope.showMenu = true;
            }
        }
    };
}).controller('testCtrl', ['$scope', 'getter', function ($scope, getter) {
    $scope.reservation = getter.get();
}]);