AngularJS Special Directive ng-repeat

Question

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

I have two ul elements and dynamic data. For example:

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

I want to write some custom directive for ng-repeat that will generate lists for students and teachers for different ul.

How can I write a directive with some condition that will repeat li on the right ul?

Yes, I can, filter My data and generate two arrays, for students and teachers, and repeat them myself. But I do not like it. How can I write one custom directive that will determine where the current object will be repeated?

---

UPDATE

Okey, I'm new to angular, so I thought there would be something simple trick, something like this:

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

So, with your answers, I could write the conditions that I wanted. Sorry, that was a stupid decision.

, :

Breadcrumbs , 500px. li , , inline.

, - , ul , , li .

- ul lis, , ul, , - ul

Answer 1

:

• angular. :

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