在模型更改时再次使用ng-repeat调用函数

时间:2015-10-14 14:31:09

标签: angularjs

我有一个表格,我想在用户登录后重新渲染一个函数的ng-repeat。如何使视图加载ng-repeat并再次对函数进行分解。有没有办法对模型中的更改进行ng-repeat重新渲染?

以下是视图,以便了解为什么使用函数而不是仅仅循环模型。有问题的重复是ng-repeat="(index, event) in vm.getEvents(dayObject) track by $index"

<!-- CALENDAR NAV -->
<div class="calendar-nav">
    <div class="prev">
        <button class="btn btn-default pull-right" ng-click="vm.goToPrevWeek()" ng-disabled="vm.isCurrentWeek"><i class="glyphicon glyphicon-chevron-left"></i></button>
    </div>
    <div class="date">
        <p class="text-primary text-center">{{vm.weekViewString}}</p>
    </div>
    <div class="next">
        <button class="btn btn-default pull-left" ng-click="vm.goToNextWeek()"><i class="glyphicon glyphicon-chevron-right"></i></button>
    </div>
</div>
<!-- END CALENDAR NAV -->
<!-- CALENDAR HEADER -->
<div class="calendar-header">
    <div class="weekdate-header date-header day-1 split-{{vm.weekSplit}}" ng-class="{'today': dayObject.isToday}" ng-repeat="(index, dayObject) in vm.calendarDays track by $index">
        <div class="date-container"><span class="date">{{dayObject.day}}</span><span class="week-day"> {{dayObject.weekDay}}</span></div>
    </div>
</div>
<!-- END CALENDAR HEADER -->
<!-- CALENDAR CONTENT -->
<div class="calendar-content">
    <div class="calendar-aside">
        <div class="day-hour" ng-repeat="(index, hourObject) in vm.calendarHours track by $index">
            <span class="hour">{{hourObject.hour}}</span>
        </div>
    </div>
    <div class="calendar-days">
        <div class="calendar-day day-col day-1 split-{{vm.weekSplit}}" ng-class="{'today': dayObject.isToday}" ng-repeat="(index, dayObject) in vm.calendarDays track by $index">
            <div class="mobile-day hidden-lg hidden-md hidden-sm">
                <div class="date-container"><span class="date">{{dayObject.day}}</span><span class="week-day"> {{dayObject.weekDay}}</span></div>
            </div>
            <div class="day-hour hour-{{hourObject.number}}" ng-repeat="(index, hourObject) in vm.calendarHours track by $index">
                <div class="hour">
                    <div class="half-hour"></div>
                </div>
            </div>
            <!-- CALENDAR EVENTS -->
            <div id="{{event.idName}}" class="event-container {{event.type}}" style="top: {{event.top}}px; left: {{event.left}}%; width: {{event.width}}%; height: {{event.height}}px;"
                 ng-repeat="(index, event) in vm.getEvents(dayObject) track by $index" ng-switch="event.type">
                <div class="buttons" ng-switch-when="">
                    <div class="amount">{{event.spotsAvailable}}</div>
                </div>
                <div class="buttons" ng-switch-when="success">
                    <i class="glyphicon glyphicon-ok-sign"></i>
                </div>
                <div class="buttons" ng-switch-when="full">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                </div>
                <div class="text">
                    <span class="title">{{event.name}}</span>
                    <p class="locatie-time hidden-lg hidden-md hidden-sm"> <span>{{event.startsAt | date:'HH:mm' }}</span>&nbsp;-&nbsp;<span>{{event.endsAt | date:'HH:mm' }}</span> </p>
                    <span class="locatie-info">{{event.formattedAddress}}</span>
                </div>
            </div>
            <!-- END CALENDAR EVENTS -->
        </div>

    </div>
</div>
<!-- END CALENDAR CONTENT -->

1 个答案:

答案 0 :(得分:1)

我最终用ng-repeat中的函数替换了函数返回的数据的直接链接,现在视图正在更新。