我正在使用Laravel和AngularJS完全重建我的网站(最初与Wordpress一起被黑客入侵)。这是一次巨大的学习经历,我想我已经快到了,但是有一个问题。
在我的网站上,“方案”(或课程)由“单元”组成,“单元”由“课程”组成。使用Eloquent检索此数据很好,我像这样的示例一样检索有效的JSON ...
[
{
"id": "1", //Scheme Id
"title": "Sports",
"description": "This is a Sports course!",
"units": [
{
"id": "1",
"title": "Tennis",
"lessons": [
{
"id": "6",
"title": "Serving"
},
{
"id": "7",
"title": "Hitting the ball with top-spin"
}
]
},
{
"id": "2",
"title": "Athletics",
"lessons": [
{
"id": "1",
"title": "Long Jump"
},
{
"id": "2",
"title": "Hurdling Technique"
}
]
},
{
"id": "4",
"title": "Golf",
"lessons": [
{
"id": "4",
"title": "Pitching"
},
{
"id": "5",
"title": "Putting"
}
]
}
]
}
....
]
另外,我有一个简单的已完成的课程ID数组,适用于像这样的特定用户...
[2, 6, 8, 9] ///User has completed lessons with ids of 2,6,8 and 9
在我看来,我正在使用嵌套的ng-repeat循环,就像这样...
...
<div ng-controller="SchemesController">
<div ng-repeat="scheme in schemes">
<h1>{{scheme.title}}</h1>
<div ng-repeat="unit in scheme.units">
<h3>{{unit.title}}</h3>
<div ng-repeat="lesson in unit.lessons">
<div>{{lesson.title}}: {{status}}</div>
</div>
</div>
</div>
</div><!--[end of ng-controller="SchemesController"]-->
....
SchemesController(简单!)看起来像这样...
var app = angular.module('schemesApp', []);
app.controller('SchemesController', function($scope){
$scope.schemes=jsonData;
});
问题是我不知道如何填充{{status}}字段,我只想简单地声明“完成”或“不完整”。我调查了是否可以以某种方式将此信息添加到我的原始数组中...
"lessons": [
{
"id": "6",
"title": "Serving",
"status": "Complete" //populated somehow
},
{
"id": "7",
"title": "Hitting the ball with top-spin",
}
]
但我却一无所获。有没有一种方法可以做到这一点(我玩过underscore.js,觉得可以帮上忙吗?)。
还是从创建和调用javascript函数中填充{{status}} ?!
任何人都可以提供的任何帮助都将是不可思议的。我是一名学校老师,出于某种虐待狂的原因,我发现一些编程/网页设计会很有趣地利用我的业余时间,因此,如果这是一个愚蠢的问题,我深表歉意。提前致谢!!!
顺便说一句,如果有人对这个问题有更好的“标题”,那么请告诉我。
我假设您不需要将状态持久化回数据库...
这是您遇到的问题:
<div>{{lesson.title}}: {{status}}</div>
您实际上不需要将状态存储在数据模型中,因为状态仅用于表示目的。
假设您完成的课程数组定义如下:
$scope.completedLessons = [1, 2, 3, 4, 5] // Or however you'd assign it
您需要像这样在您的范围内创建一个函数:
$scope.isLessonCompleted = function(lessonId) {
return $scope.completedLessons.indexOf(lessonId) > -1;
};
然后,您需要将HTML从上面更改为:
<div>{{lesson.title}}: {{isLessonCompleted(lesson.id) && 'Complete' || 'Incomplete'}}</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句