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

所以，有了你的答案，我可以写出我想要的条件。很抱歉，这是个愚蠢的决定。

所以我的实际情况是：

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

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

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

Answer 1

选项：

• 在内置角度滤镜中使用。例如：

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

plnkr

• 在控制器中拆分阵列。两个拆分数组仍应指向原始对象（在原始数组中），因此操作应该没问题。

---

您绝对可以创建自己的指令，但您最终会封装上述选项之一。

Answer 2

比编写指令更好，使用数组的内置函数过滤数组 javascript。 示例：

HTML

<div ng-controller="ClassroomController as classroom">
    <ul id="teachers">
        <li ng-repeat="teacher in classroom.teachers track by $index"></li>
    </ul>
   <ul id="students">
        <li ng-repeat="student in classroom.students track by $index"></li>
    </ul>
</div>

JAVASCRIPT

function Controller() {
  var vm = this;
  vm.data = [
{
    name: 'Jack'
    status: 'teacher'
},
{
    name: 'Angelina'
    status: 'teacher'
},
{
    name: 'Maya'
    status: 'student'
},
{
    name: 'Kate'
    status: 'teacher'
},
{
    name: 'Margaret'
    status: 'student'
} 
];

   vm.teachers = vm.data.filter(function(item){return item.status === 'teacher'});
   vm.students = vm.data.filter(function(item){return item.status === 'student'});


}

Answer 3

我也认为过滤是最好的，正如已经回答的那样。但是根据您的更新，您可以在 yuor 指令控制器中执行以下操作：

    $scope.getTemplateUrl =  function() {
        if (status == something) {
            return '/partials/template1.html';
        } else {
            return '/partials/template2.html';
        }
    }

然后定义你的指令模板如下：

        template: '<ng-include src="getTemplateUrl()"/>',

当然必须在渲染指令之前定义状态。

Answer 4

directive('info', function()
{
    return {
        restrict : 'E',

        template : '<ul> <li ng-repeat="l in list"><div ng-if="check(l)">{{l.name}}</div></li></ul></br><ul><li ng-repeat="l in list"><div ng-if="!check(l)">{{l.name}}</div></li></ul>',

        controller : function($scope)
        {
            $scope.check = function(l)
            {

                if(l.status=="student")
                    return true;
                else if(l.status=="teacher")
                    return false;
            }
        }
    };
});