如何使用角度路由在部分 HTML 文件中使用 NG-Repeat
how to use ng-repeat in partial html files using angular routes
以下代码曾经是我主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足够聪明,知道你尝试使用哪个控制器。
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- 导入jQuery脚本获胜'我不处理html文件
- 生成pdf或其他非html文件时的错误处理
- 从HTML调用typescript文件中的函数
- 使用metro-uiJS对话框调用其他文件html
- 使用选项卡导航到不同的html文件(html、JavaScript)
- 使用 socket.io 时如何发送文件(html,js,css和资源)
- 采购<p>从.txt文件.HTML
- 包含的html中的类无法访问父文件html中的函数
- 重新加载链接文件 HTML
- 如何使用 JavaScript 或 JQuery 从输入类型=文件 html 元素获取文件名
- Angularjs + 指令文件 html 内容点击事件在 js 文件中不起作用
- 如何直接从网页读取/写入本地文件 (html)
- jQuery加载txt文件.html()
- 指定简单配置文件HTML或javascript的最佳方式是什么
- Angular将所有头文件html提取到一个文件中
- 想要部分上传大文件.HTML/PHP
- AJAX -上传文件(HTML 5) &PHP