CODEWITHSUNDEEP
javascripthtmlangularjs
aw-bubakik
aw-bubakik

Reputation: 331

AngularJS ng-repeat custom directive

<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, which will generates lists, for students and for teachers, for different ul's.

How can I write directive, with some condition, which will repeat li's in the right ul?

Yes, I can, filter My data and generate two Arrays, for students and teachers and than repeat those Independently. But, I don't like this way. How it is possible to write one custom directive which will determines, where to repeat current Object?

UPDATE

Okey, I'm new in angular, so I've thought, that there will be something simple trick, something like this:

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

So, with your answers I could write conditions which I wanted. Sorry about this, this was stupid decision.

So my actual case is:

I have Breadcrumbs data and main container, which width is equal to 500px. I want to repeat li in this container and I want to my li's were always always inline.

If my data will be big, or some title will be big and my ul width will be more, than my container, some li elements will be dropped bellow.

because of this, I have two ul elements and lis which won't have there space I want to insert in second ul, which will be hidden and after click on something I will show this ul

Upvotes: 4

Views: 421

Answers (4)

Abdul
Abdul

Reputation: 1

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

Upvotes: 0

Gonzalo Pincheira Arancibia
Gonzalo Pincheira Arancibia

Reputation: 3623

Better than write a directive, filter your array javascript with the built-in functions for array. Example:

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


}

Upvotes: 1

birkett
birkett

Reputation: 10141

I also think that filtering is the best as already answered. But according to your update you can do something like this in yuor directive controller:

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

Then define your directive template as follows:

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

Of course status has to be defined before the directive is rendered.

Upvotes: 0

Matt Way
Matt Way

Reputation: 33189

Options:

  • Use in built angular filters. For example:

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

plnkr

  • Split the array in your controller. Both split arrays should still point to the original object (in the original array), so manipulation should be ok.

You can definitely create your own directive, but you will end up encapsulating one of the options above.

Upvotes: 2

Related Questions