JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app" ng-controller="dummy">
     <h3>25,0000</h3>

    <div class="btn-group" dropdown is-open="status.isopen">
        <button id="single-button" type="button" class="btn btn-default" dropdown-toggle ng-disabled="disabled">Private Cabin <span class="caret"></span>

        </button>
        {{thePrice}}
        <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
            <li role="menuitem" ng-repeat="room in rooms.packageRoomTypeWithPriceList"><a href="" ng-click="updatePrice(room.packagePriceVOList[0].packagePriceId)">{{room.roomTypeName}}</a>
            </li>
        </ul>
    </div>
</div>

CSS

.has-error {
    background-color: red;
}

JavaScript

var app = angular.module("app", []);
app.controller('dummy', ['$scope', function ($scope) {
    $scope.updatePrice = function (price) {
        $scope.thePrice = price;
    };
    $scope.rooms = {
        "packageRoomTypeWithPriceList": [{
            "roomTypeId": 13,
                "roomTypeName": "General",
                "packagePriceVOList": [{
                "packagePriceId": 48,
                    "price": "3000"
            }]
        }, {
            "roomTypeId": 14,
                "roomTypeName": "Sharing",
                "packagePriceVOList": [{
                "packagePriceId": 49,
                    "price": "3750"
            }]
        }, {
            "roomTypeId": 15,
                "roomTypeName": "Private",
                "packagePriceVOList": [{
                "packagePriceId": 50,
                    "price": "4500"
            }]
        }]
    };

}]);