javascript - AngularJS ng-repeat 自定义指令

Question

<div>
    <ul id="teachers">
        <li ng-repeat></li>
    </ul>
    <ul id="students">
        <li ng-repeat></li>
    </ul>
</div>

我有两个 ul 元素和动态数据。例如:

[
    {
        name: 'Jack'
        status: 'teacher'
    },
    {
        name: 'Angelina'
        status: 'teacher'
    },
    {
        name: 'Maya'
        status: 'student'
    },
    {
        name: 'Kate'
        status: 'teacher'
    },
    {
        name: 'Margaret'
        status: 'student'
    }
]

我想为 ng-repeat 编写一些自定义指令，它将为学生和教师为不同的 ul 生成列表。

我如何编写指令，在某些条件下，它会在正确的 ul 中重复 li？

是的，我可以过滤我的数据并为学生和教师生成两个数组，然后独立重复这些数组。但是，我不喜欢这种方式。如何编写一个自定义指令来确定在何处重复当前对象？

---

更新

好吧，我是 angular 的新手，所以我想，会有一些简单的技巧，像这样:

if(status === 'something')
   use this template
else
   use this template

因此，根据您的回答，我可以写下我想要的条件。对此感到抱歉，这是一个愚蠢的决定。

所以我的实际情况是:

我有面包屑数据和主容器，宽度等于 500px。我想在这个容器中重复 li，我希望我的 li 总是内联的。

如果我的数据很大，或者一些标题很大并且我的 ul 宽度比我的容器大，一些 li 元素将被丢弃在下面。

因此，我有两个 ul 元素和 lis，它们没有空间，我想在第二个 ul 中插入，这将被隐藏，在单击某些内容后，我将显示这个 ul

Answer 1

选项:

• 在内置 Angular 过滤器中使用。例如:

<ul id="teachers">
<li ng-repeat="person in people | filter: { status: 'teacher' }"></li>
</ul>

plnkr

• 在你的 Controller 中拆分数组。两个拆分数组仍应指向原始对象(在原始数组中)，因此操作应该没问题。

---

您当然可以创建自己的指令，但您最终将封装上述选项之一。