Angular function default data out of order on view

Question

I'm working on a scheduling app with Angularjs and Firebase. For some reason when I write my function to set the default data the days are in order Mon, Tues, Wed, Thurs, Fri but my view shows the days as Fri, Mon, Thurs, Tues, Wed. Not sure why or how to fix, every thing else seems to be working fine.

app.js

    angular.module('scheduleApp', ['firebase'])
    create our main controller and get access to firebase
    .controller('mainController', function($scope, $firebase) {


      var ref = new Firebase("https://xxxxx.firebaseio.com/days");  
      var fb = $firebase(ref);

      var syncObject = fb.$asObject();

      syncObject.$bindTo($scope, 'days');

       $scope.reset = function() {    

fb.$set({
  monday: {
    name: 'Monday',
    slots: {

      100: {
        time: '10:00am',
        booked: false
      },
      110: {
        time: '11:00am',
        booked: false
      },
      120: {
        time: '12:00pm',
        booked: false
      },
      130: {
        time: '1:00pm',
        booked: false
      },
      140: {
        time: '2:00pm',
        booked: false
      },
      150: {
        time: '3:00pm',
        booked: false
      },
      160: {
        time: '4:00pm',
        booked: false
      },
      170: {
        time: '5:00pm',
        booked: false
      },
      180: {
        time: '6:00pm',
        booked: false
      }
 }
  },
  tuesday: {
    name: 'Tuesday',
    slots: {

      100: {
        time: '10:00am',
        booked: false
      },
      110: {
        time: '11:00am',
        booked: false
      },
      120: {
        time: '12:00pm',
        booked: false
      },
      130: {
        time: '1:00pm',
        booked: false
      },
      140: {
        time: '2:00pm',
        booked: false
      },
      150: {
        time: '3:00pm',
        booked: false
      },
      160: {
        time: '4:00pm',
        booked: false
      },
      170: {
        time: '5:00pm',
        booked: false
      },
      180: {
        time: '6:00pm',
        booked: false
      }
    }
  },
  wednesday: {
    name: 'Wednesday',
    slots: {

      100: {
        time: '10:00am',
        booked: false
      },
      110: {
        time: '11:00am',
        booked: false
      },
      120: {
        time: '12:00pm',
        booked: false
      },
      130: {
        time: '1:00pm',
        booked: false
      },
      140: {
        time: '2:00pm',
        booked: false
      },
      150: {
        time: '3:00pm',
        booked: false
      },
      160: {
        time: '4:00pm',
        booked: false
      },
      170: {
        time: '5:00pm',
        booked: false
      },
      180: {
        time: '6:00pm',
        booked: false
      }
  }
      },
      thursday: {
    name: 'Thursday',
    slots: {

      100: {
        time: '10:00am',
        booked: false
      },
      110: {
        time: '11:00am',
        booked: false
      },
      120: {
        time: '12:00pm',
        booked: false
      },
      130: {
        time: '1:00pm',
        booked: false
      },
      140: {
        time: '2:00pm',
        booked: false
      },
      150: {
        time: '3:00pm',
        booked: false
      },
      160: {
        time: '4:00pm',
        booked: false
      },
      170: {
        time: '5:00pm',
        booked: false
      },
      180: {
        time: '6:00pm',
        booked: false
      }
  }

      },

  friday: {
    name: 'Friday',
    slots: {

      100: {
        time: '10:00am',
        booked: false
      },
      110: {
        time: '11:00am',
        booked: false
      },
      120: {
        time: '12:00pm',
        booked: false
      },
      130: {
        time: '1:00pm',
        booked: false
      },
      140: {
        time: '2:00pm',
        booked: false
      },
      150: {
        time: '3:00pm',
        booked: false
      },
      160: {
        time: '4:00pm',
        booked: false
      },
      170: {
        time: '5:00pm',
        booked: false
      },
      180: {
        time: '6:00pm',
        booked: false
        }
      }
     }
       });    

      };

    });

index.html

      <!DOCTYPE html>
         <html lang="en">
         <head>
        <meta charset="UTF-8">
        <title>Angular Scheduling</title>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.m    in.css">
        <link rel="stylesheet" href="style.css">

       <!-- JS -->
       <!-- load Angular, Firebase, Firebase Angular Library, and  custom    app.js -->
       <script   src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
       <script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
       <script src="app.js"></script>
    </head>
    <body>
    <div class="container" ng-app="scheduleApp" ng-controller="mainController">

       <div class="page-header text-center">       
      <h1>Schedule City</h1>        
      </div>

      <div class="row times">

      <div class="col-xs-4 text-center" ng-repeat="day in days">

       <h2>{{ day.name }} </h2>

       <div class="time-slot" ng-repeat="slot in day.slots">       
     <input type="checkbox" id="{{ day.name }}-{{ $index}}" ng- model="slot.booked" ng-disabled="slot.booked">
     <label for="{{ day.name }}-{{ $index }}">{{ slot.time }}<br>
     <span ng-if="slot.booked">Booked</span>
     <span ng-if="!slot.booked">Available</span>
   </label>
   </div>
     </div>    

    </div>

     <p class="text-center">    
    <a href="#" class="btn btn-primary" ng-click="reset()">Reset</a>
    </p>

    </div>  
    </body>
   </html>

Matsemann · Accepted Answer · 2015-10-25 21:22:43Z

1

Add an order field to your data. Eg

  monday: {
    name: 'Monday',
    order: '1',
    slots: {
 etc...

and then do

ng-repeat="day in days | orderBy:'order'"

Update: As you don't have an array, this may not work. See iterating over object properties in the documentation for ngRepeat for some tips.

One idea is to instead define the order yourself in a new variable, iterate over that and use it to retrieve the correct values from the original object.

$scope.dayNames = ["monday", "tuesday"...];

and then do

ng-repeat="dayName in dayNames"

and then grab the object using days[dayName], e. g.

ng-repeat="slot in days[dayName].slots"

Update: Like this:

  <div class="col-xs-4 text-center" ng-repeat="dayName in dayNames">

   <h2>{{ days[dayName].name }} </h2>

   <div class="time-slot" ng-repeat="slot in days[dayName].slots">       
 <input type="checkbox" id="{{ days[dayName].name }}-{{ $index}}" ng- model="slot.booked" ng-disabled="slot.booked">
 <label for="{{ days[dayName].name }}-{{ $index }}">{{ slot.time }}<br>
 <span ng-if="slot.booked">Booked</span>
 <span ng-if="!slot.booked">Available</span>
....

edited Oct 25, 2015 at 21:22

answered Oct 22, 2015 at 21:29

Matsemann

22k20 gold badges60 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

sp312 Over a year ago

Greatly appreciate the thorough response. I've made the updated changes and it eliminates the names of the days all together and only allows me to select time slots from the first day's column. Even if I click on a time slot on the 3rd, 4th day, the time slot is highlighted and marked as booked only on the first column. You've definitely helped me get in the right direction though.

Matsemann Over a year ago

@sp312 could you show what you've tried with this solution so far?

sp312 Over a year ago

With out rewriting the code to change it to an array I was not able to find the correct way to fix this. I realized angular automatically orders object alphabetically so just for the sake of my practice I just did a cheat and added letters in alphabetical order in front of each object like so. Won't leave like this of course but at least I now know the issue which will make it easier to fix. $set({ amonday: { name: 'Monday', slots: { btuesday: { name: 'Tuesday', slots: {

sp312 Over a year ago

It seems the best way to fix this would be to add the object's key as these links show. stackoverflow.com/questions/19287716/… stephenradford.me/keep-your-objects-order-the-same-in-angularjs Which I'll try asap and report back.

sp312 Over a year ago

Honest I'm not sure. With your code I added <div class="col-xs-2 text-center" ng-repeat="dayName in dayOrder"> <h2> days[dayName] </h2> and var syncObject = fb.$asObject(); syncObject.$bindTo($scope, 'dayOrder'); $scope.dayOrder = ["monday", "tuesday", "wednesday", "thursday", "friday"]; $scope.reset = function() { fb.$set({ monday: { name: 'Mon', slots: { Which gives me a blank page. The closest I got was with the first solution here stackoverflow.com/questions/19287716/…

|

Collectives™ on Stack Overflow

Angular function default data out of order on view

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related