如何使用角度路由在部分 HTML 文件中使用 NG-Repeat

how to use ng-repeat in partial html files using angular routes

本文关键字:文件 HTML NG-Repeat 何使用 路由      更新时间:2023-09-26

以下代码曾经是我主html文件的一部分,但我决定将应用程序拆分为部分,然后渲染它,但我现在被困住了,不知道如何重复渲染代码了。

<div class="col-md-12" ng-controller="TimeSlotController as calendar" >
 <div class="col-md-5 col-md-offset-1 timeblock" ng-repeat="slots in calendar.timeslot" ng-click="calendar.selectTimeSlot(slots.time)">
    <h3 class="event-type-name">[[ slots.time]] Hour Appointment</h3>
    <div class="description mts">[[slots.description]]</div>
    <div class="cost"><i class="fa fa-euro"></i> [[slots.cost ]]</div>
 </div>

这就是我的控制器现在的样子

app.config(function($interpolateProvider, $routeProvider, $locationProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
    $routeProvider
                .when('/timeslot', {
                    controller: 'TimeSlotController as timerange',
                    templateUrl:'/views/timeslot.html'
                })
                .when('/calendar', {
                    controller: 'CalendarController',
                    templateUrl:'/views/calendar.html'
                })
                .when('/mail', {
                    controller: "MailController",
                    templateUrl: '/views/mail.html'
                })
                .otherwise({
                    redirecTo: '/timeslot'
                });
    $locationProvider.html5Mode({
                       enabled: true,
                       requireBase: false
                     });        

});

app.controller("TimeSlotController", function($rootScope, $location, $scope) {
    $scope.timeslot = [
       {
        time:1,
        description: "Welcome to my scheduling page. Please follow the instructions to add an event to my calendar.",
        cost: "10"
      },
       {
        time:2,
        description: "Welcome to my scheduling page. Please follow the instructions to add an event to my calendar.",
        cost: "20"
      },
       {
        time:4,
        description: "Welcome to my scheduling page. Please follow the instructions to add an event to my calendar.",
        cost: "10"
      },
      {
        time:6,
        description: "Here lies 3",
        cost: "10"
      }
    ];
    console.log($scope.timeslot);
    $scope.selectTimeSlot = function(timeslot) {
        $rootScope.timeSlot = timeslot;
        console.log($rootScope.timeSlot);
        $location.path('/calendar');
    }
});

如何在此类文件类型中使用 ng-repeat?我环顾四周,但找不到我要找的东西。

 ng-repeat="slots in timeslot"

普伦克:http://plnkr.co/edit/ImdmHlpevzO6FL2fe2EP?p=preview

正如 Dinesh 所说,在指定控制器时删除日历。除非你正在做一些我们不知道的更复杂的事情,否则Angular足够聪明,知道你尝试使用哪个控制器。