AngularJS ng-repeat custom directive

AngularJS ng-repeat custom directive

本文关键字：directive custom ng-repeat AngularJS      更新时间：2023-09-26
<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？

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

更新

Okey，我是棱角的新手，所以我想，会有一些简单的技巧，像这样：

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

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

所以我的实际案例是：

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

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

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

选项：

  • 用于内置的角度过滤器。例如：

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

普罗提

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

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

比编写指令更好的是，使用数组的内置函数过滤数组 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'});

}

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

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

然后按如下方式定义指令模板：

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

当然，必须在呈现指令之前定义状态。

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;
            }
        }
    };
});
相关文章：