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

Question

我正在使用 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}}？！？

任何人都可以提供的任何帮助都是不可思议的。我是一名学校老师，出于某种虐待狂的原因，我发现一些编程/网页设计是我业余时间的有趣用途，所以如果这是一个愚蠢的问题，我深表歉意。提前致谢！！！

顺便说一句，如果有人对此问题有更好的“标题”，请告诉我。

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 官方文档