在ng-repeat中带有ng-if的AngularJS函数

Question

I have some times that are calculated dynamically and repeat in an ng-repeat like so:

<div class="col-sm-4" ng-repeat="time in scheduling.openTimes">
   <label class="label label-default label-time" ng-class="{'active' : scheduling.militaryTime == time.military}" ng-click="scheduling.setTime(time.military)" ng-if="!scheduling.booked(time.military)">
        {{time.display}}
</label>
</div>

And the function scheduling.booked() gets called on each label. It should either return true if the time is "booked" or false if not.

I want the time to display if the time is NOT BOOKED . My function looks like so:

        scheduling.booked = function(time)
    {
        ref.child('appointments').once('value', function(snapshot){
            snapshot.forEach(function(childSnapshot){
                var data = childSnapshot.val();
                var sysDate = new Date(scheduling.date);
                var appDate = new Date(data.date);
                var appTime = data.time.military;

                if(appDate.getDay() == sysDate.getDay())
                {
                    if(appTime == time)
                    {
                        return true
                    }
                    else
                    {
                        return false
                    }
                }
                else
                {
                    return false
                }
            })
        })

    }

It consoles out everything like it should but the label is not hiding? The console shows that is should be.

update

through some research and lots of deleting, I've came up with this. It works and does what I want as long as you only have one appointment. If you have more than one, it duplicates the time slot. How would you make it so it checked if the time was in the array already and skip it if it is?

scheduling.booked = function(time, timeDis) {

        ref.child('appointments').once('value', function(snapshot) {
            snapshot.forEach(function(childSnapshot) {
                var data = childSnapshot.val();
                var sysDate = new Date(scheduling.date).getDate();
                var appDate = new Date(data.date).getDate();
                var appTime = data.time.military;
                if(sysDate == appDate)
                {
                    if(appTime == time)
                    {
                        $scope.openTimes.push({
                            'military' : time,
                            'display'  : timeDis,
                            'disabled' : true
                        })
                    }
                    else
                    {
                        $scope.openTimes.push({
                            'military' : time,
                            'display'  : timeDis,
                            'disabled' : false
                        })
                    }
                }
                else
                {
                    $scope.openTimes.push({
                        'military' : time,
                        'display'  : timeDis,
                        'disabled' : false
                    })
                }

            })
        });

        $timeout(function(){
            scheduling.openTimes = $scope.openTimes;
            scheduling.timeLoading = false;
        }, 1300)

    }

I have another function calling this one now, I've ditched the ng-if.

Answer 1

Your function scheduling.booked does not have a return . So it will always return undefined . So when angular interprets ng-if="!scheduling.booked(time.military)" will be ng-if="true" ( !undefined equals true ). This explains why all records are shown.

I think the following code should work.

scheduling.booked = function(time) {
  var booked = false;

  ref.child('appointments').once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var data = childSnapshot.val();
      var sysDate = new Date(scheduling.date);
      var appDate = new Date(data.date);
      var appTime = data.time.military;

      if (appDate.getDay() == sysDate.getDay() && appTime == time) {
        booked = true;
      }
    })
  });

  return booked; // <-- make sure the function has a return value
}