AngularJS功能与ng-if在ng-repeat内

时间:2016-03-10 02:42:29

标签: javascript angularjs

我有时会动态计算并在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。

1 个答案:

答案 0 :(得分:0)

您的功能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
}