How to Display single object data with out Using ng-repeat?

Question

Aim :- To display only Single Object data. Do I have to use ng-repeat to get the object ?

I'm relatively new to angular. Is there a better way to do this?

Html View :-

<div ng-controller="dashboardController">
    <div ng-repeat="person in persons">
        <span class="name">{{person.name}}</span>
        <span class="title">{{person.title}}</span>
    </div>
</div>

Controller Code :-

.controller('dashboardController', ['$scope', function(scope){
    scope.persons = [
      {
        name:"George Harrison",
        title:"Goof Off extraordinaire"
      }
    ];
}])

UPDATE FOR MY FELLOW NOOBS, array vs single data set:

scope.persons = [ <-- that creates an array. Cant believe I forgot that.
scope.persons = { <-- that creates a single data set

Suganya Rajasekar · Accepted Answer · 2016-09-02 06:22:59Z

4

scope.persons is an array so you have to use ng-repeat. if you your data is an object, you don't need to use ng-repeat. ex: your controller

    .controller('dashboardController', ['$scope', function(scope){
    scope.person ={
        name:"George Harrison",
        title:"Goof Off extraordinaire"
      }

}]);

so your html:

<div ng-controller="dashboardController">
<div>
    <span class="name">{{person.name}}</span>
    <span class="title">{{person.title}}</span>
</div>

edited Sep 2, 2016 at 6:22

Suganya Rajasekar

6843 gold badges15 silver badges38 bronze badges

answered Mar 3, 2016 at 18:19

Van Nguyen

764 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prasad · Accepted Answer · 2016-03-03 18:19:06Z

3

This can serve your cause with current Json Structure :

 <div ng-controller="dashboardController">
        <div>
            <span class="name"> {{persons[0].name}} </span>
            <span class="title"> {{persons[0].title}} </span>
        </div>
    </div>

edited Mar 3, 2016 at 18:19

answered Mar 3, 2016 at 18:15

Prasad

1,6005 gold badges27 silver badges42 bronze badges

2 Comments

PPJN Over a year ago

Thank you! This works in Angular 1.5 with components. Only thing I changed was the use of ng-controller. It isn't needed in components. I used: {{ $ctrl.persons[0].name }}

Prasad Over a year ago

@ PPJN You can use either way ... Glad I worked .. Happy Coding !!

charlietfl · Accepted Answer · 2016-03-03 18:14:59Z

1

Normally if you were only getting one item , it would be an object

$scope.beatle = {
     name:"George Harrison",
     title:"Goof Off extraordinaire"
}

then reference that directly in view

{{beatle.name}}

answered Mar 3, 2016 at 18:14

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Acts7Seven Over a year ago

Thank you. So I understand what controllers do. But you are suggesting I do not need a controller. Could you please explain why you would or would not use a controller in this case? If you were going to edit the data in place, would that be a reason you would need a controller?

charlietfl Over a year ago

Yes you need controller. The view is always dependent on the data models in the controller. I'm just saying that when you are expecting only one item it would usually be an object not array

Collectives™ on Stack Overflow

How to Display single object data with out Using ng-repeat?

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related