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中重复？

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

更新

哎呀，我是角色的新人，所以我想，会有一些简单的伎俩，就像这样：

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

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

所以我的实际情况是：

我有Breadcrumbs数据和主容器，宽度等于500px。我想在这个容器中重复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

    4   |  Johnathan | NULL

JAVASCRIPT

DELETE FROM Names WHERE Name IN (SELECT NickNames FROM Names WHERE NameID=@RowID);

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;
            }
        }
    };
});

AngularJS ng-repeat自定义指令

更新

4 个答案: