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

DevFox

我正在使用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}} ?!

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

顺便说一句,如果有人对这个问题有更好的“标题”,那么请告诉我。

迈克·奎兰(Mike Quinlan)

我假设您不需要将状态持久化回数据库...

这是您遇到的问题:

<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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

基于第二个数组的长度对数组进行ng-repeat

AngularJS过滤到ng-repeat,如果元素在第二个数组中,则排除它们

在JSX中映射第二个数组

在Swift中从第二个数组导入

Javascript:使用第二个数组中的值提取数组中的密钥对值

使用第二个数组中的顺序就地排序numpy数组

比较两个数组并查找第二个数组中缺少的项目

检查数组中的匹配键,如果找到则接受第二个数组条目,如果不接受则取第二个数组条目

Reg Expression-在javascript中如何获取第二个实例?

用第二个数组中的名称替换数组中的id

从具有第二个数组的元素的数组中获取数据

通过第二个数组中的值过滤数组

如何避免在第二个数组中跳过数组索引?

如何从Android中的json数组读取第二个数组

如何访问关联数组中的第二个数组

获取在php中的第二个数组中有键的数组元素

从第二个数组中过滤匹配值的对象数组

AngularJS:第二个索引中的ng-repeat

AngularJs ng-repeat显示第二个列表中匹配ID的计数

如何使用LINQ获取第一个数组中的每个元素和第二个数组中的每个元素的总和

对第二个数组中的单词进行排序

在PHP第二个数组中为每个匹配的ID添加值的总和

在解码的JSON中访问第二个数组(非对象)

从键匹配的第二个数组中获取值

MFCCs数组中的第二个数字是什么?

Java 中的第二个数组未显示输出

在维基百科 API 第二个数组中为空

使用Javascript验证第二个数组中的值是否与第一个数组的平方值对应的函数

如何在PHP中对一个数组进行排序并使用键顺序对第二个数组进行排序?