Question

我正在使用Laravel和AngularJS完全重建我的网站（最初与Wordpress一起入侵）。这是一次巨大的学习经历，我认为我差不多只有一个问题。

在我的网站上，“计划”（或课程）由“单元”组成，“单元”由“课程”组成。检索这个数据很好，使用Eloquent I检索有效的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并觉得这可能会有所帮助？）。

或者我是否填充{{status}}来创建和调用javascript函数？！？

任何人都能提供的任何帮助都会令人难以置信。我是一名学校老师，由于一些虐待狂的原因，我发现一些编程/网页设计很有趣地利用了我的业余时间所以我很抱歉这是一个愚蠢的问题。谢谢！

顺便说一句，如果有人对这个问题有更好的'头衔'，请告诉我。

Answer 1

我假设您不需要将状态保留回数据库......

这就是你遇到问题的地方：

<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>

Answer 2

如果课程也是一个模型，并且每个课程都应该有一个状态，这不是表格中的列/字段，而是您要添加逻辑来确定，您可以通过添加以下内容添加自定义模型访问者到models/Lesson.php：

// Append custom accessor attributes
protected $appends = ['status'];

public function getStatusAttribute() {
    // Add logic here
    return 'Complete';
}

这样，当您使用Eloquent检索数据时，您还会看到status属性作为对象的一部分，因此您可以照常访问它$lesson->status（PHP）或lesson.status（JS）。

有关详细信息，请参阅accessors and mutators

上的官方Laravel文档

使用第二个数组在ng-repeat中填充AngularJS {{expression}}

2 个答案: