Question

我正在使用Angular JS开发电影票预订系统。我想绘制有3个区域的座椅结构。

我有区域1）白金，2）钻石，3）黄金

现在我可以使用我的以下代码生成座位布局而不使用区域。就像桌子一样。

我想用区域分割座位布局。

我的代码。

 <div class="content" ng-controller="bookings">

            <p>Screen this way! :)</p>

            <table class="seatLayout">
                <tr>
                    <td class="padding-bottom"></td>
                    <td class="padding-bottom" ng-repeat="col in cols track by $index" ng-bind="col"></td>
                </tr>
                <tr ng-repeat="row in rows">
                    <td class="padding-right" ng-bind="row"></td>
                    <td class="seat" ng-repeat="col in cols" ng-click="seatClicked(row + col)" ng-switch on="getStatus(row + col)">
                        <img ng-switch-when="selected" src="{{URL::asset('images/seat_selected.png')}}">
                        <img ng-switch-when="reserved" src="{{URL::asset('images/seat_reserved.png')}}">
                        <img ng-switch-default src="{{URL::asset('images/seat_available.png')}}">
                    </td>
                </tr>
            </table>
  </div>

角。

var todomvc = angular.module('iraqi-app', ['firebase']);
todomvc.controller('bookings', function TodoCtrl($scope, $firebase,$http) {
 $scope.rows = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
    $scope.cols = [1, 2, 3, 4, 5, 6, 7, 8];


    // Set reserved and selected
    var reserved = ['A2', 'A3', 'C5', 'C6', 'C7', 'C8', 'J1', 'J2', 'J3', 'J4'];
    var selected = [];


    // seat onClick
    $scope.seatClicked = function(seatPos) {
        console.log("Selected Seat: " + seatPos);
        var index = selected.indexOf(seatPos);
        if(index != -1) {
            // seat already selected, remove
            selected.splice(index, 1)
        } else {
            // new seat, push
            selected.push(seatPos);
        }
    }

    // get seat status
    $scope.getStatus = function(seatPos) {
        if(reserved.indexOf(seatPos) > -1) {
            return 'reserved';
        } else if(selected.indexOf(seatPos) > -1) {
            return 'selected';
        }
    }

    // clear selected
    $scope.clearSelected = function() {
        selected = [];
    }

    // show selected
    $scope.showSelected = function() {
        if(selected.length > 0) {
            alert("Selected Seats: \n" + selected);
        } else {
            alert("No seats selected!");
        }
    }
 });

输出..

我想要如下所示的座位布局。

Answer 1

您可以创建JSON对象以满足特定要求。例如

$scope.rows = [
   {rowid :  'A', type:'Gold'},
   {rowid :  'B', type:'Gold'},
   {rowid :  'C', type:'platinum'},
   {rowid :  'D', type:'platinum'},
   {rowid :  'E', type:'platinum'},
   {rowid :  'F', type:'platinum'},
   {rowid :  'G', type:'platinum'},
   {rowid :  'H', type:'platinum'},
   {rowid :  'I', type:'Diamond'},
   {rowid :  'J', type:'Diamond'}];

和HTML这样的东西

  <div class="content" ng-controller="bookings">
        <table class="seatLayout">
            <!--- Arrange your layout accordingly -->
            <!-- Devide ur <tr> according to type of row -->
        </table>

        <p> Screen this way! :) </p>
   </div>

这样您就可以区分Premium或Gold或其他东西

带有角度JS的拆分座椅布置

1 个答案: