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

Question

我有一些时间是动态计算的，并且在ng-repeat中重复，如下所示：

<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>

并且在每个标签上调用了scheduling.booked()函数。 如果时间已“预定”，则返回true；否则返回false。

如果时间还NOT BOOKED确定，我想显示时间。 我的函数如下所示：

        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
                }
            })
        })

    }

它可以控制一切，但标签没有隐藏吗？ 控制台显示应该是。

更新

通过一些研究和大量删除，我想到了这一点。 只要您只有一次约会，它就能正常工作并满足我的要求。 如果您有多个，它将​​复制该时隙。 您将如何使它检查时间是否已经在数组中，如果已跳过该时间呢？

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)

    }

我现在有另一个函数调用此函数，我放弃了ng-if。

Answer 1

您的功能scheduling.booked没有return 。 因此它将始终返回undefined 。 因此，当角度解释ng-if="!scheduling.booked(time.military)"将为ng-if="true" （ !undefined等于true ）。 这解释了为什么显示所有记录。

我认为以下代码应该工作。

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
}