CODEWITHSUNDEEP
angularjs
hanu
hanu

Reputation: 397

how to get first object in ng-repeat

I am displaying a contact's information using ng-repeat. Each contact has details. I am trying to grab the first object in the list. Here is my code: 

<div ng-repeat="contact in contactList() | filter:{type: 'direct'} | filter:{duration: '1 year'} | orderBy: 'Date'">
    <div ng-click="selectedContact(contact)">
        <div>{{contact.name}}</div>
        <div>{{contact.type}}</div>
    </div>
</div>

contactList() is a function calling services:

$scope.contactList = function () {
    return ContactService.getContactList();
};

How do I get the first contact object in the ng-repeat? I want to save that object for other windows.

Upvotes: 3

Views: 4661

Answers (3)

jrkt
jrkt

Reputation: 2715

You could use 'track by $index' and use an 'ng-if' to determine when it's the first object:

<div ng-repeat="contact in contactList()| filter:{type: 'direct'}| filter:{duration:'1 year'| orderBy: 'Date' | track by $index"
     ng-if="$index == 0" 
     ng-init="someMethod()">
    <div  ng-click="selectedContact(contact)">
             <div> {{contact.name}}</div>
             <div>{{contact.type}}</div>
    </div>
</div>

You could then have a function 'someMethod()' in your controller that saves the object to a window object or to local storage:

function someMethod(key, object) {
    window.localStorage.setItem(key, object);
}

I have written an object to use for this exact thing in fact if you want to use it:

var LocalStorageManager = {
setValue: function(key, value) {
    window.localStorage.setItem(key, JSON.stringify(value));
},
getValue: function(key) {
    try {
        return JSON.parse(window.localStorage.getItem(key));
    } catch (e) {

    }
  }
};

So, you would use it with your stuff like this, in your 'someMethod()':

function someMethod(key, object) {
    LocalStorageManager.setValue(key, object);
}

Then, to get the object, you would just use the 'getValue' method calling the 'key' that you gave the object.

Upvotes: 1

Kyle
Kyle

Reputation: 1503

I'm guessing you don't just want to display the one record and you also want the first record from the array after your filters/ordering are applied. If that is the case I would recommend simply adding an alias after your last condition and then you can reference that alias in your controller.

here is a fiddle to help show:

http://jsfiddle.net/nbavesuo/

I would suggest you not call the function in the ng-repeat instead reference an array that has already been called:

<div ng-repeat="contact in contactList| 
    filter:{type: 'direct'}| filter:{duration:'1 year'}| 
    orderBy: 'Date' as filteredArray">
....

Then in your controller: 

$scope.contactList = ContactService.getContactList();

$scope.selectedContact = function(contact){
    console.log(contact);
    console.log($scope.filteredArray[0]);
}

You'll see that $scope.filteredArray[0] will have the 1st element in the sorted array.

Upvotes: 2

dfsq
dfsq

Reputation: 193261

You can set a new scope property to be a result of filtering and ordering. Note, how you group filters with ():

<div ng-repeat="contact in contacts = (contactList() | filter:{type: 'direct'} | filter:{duration:'1 year'} | orderBy: 'Date')">
    <div ng-click="selectedContact(contact)">
        <div>{{contact.name}}</div>
        <div>{{contact.type}}</div>
    </div>
</div>

Then to get the first from this list it will be just [0]:

{{ contacts[0] }}

Upvotes: 1

Related Questions