0

I'm currently building my first single page app with angularJS. The variable information stored in my controller is not displaying on the page. After extensively trying to trouble-shoot this I am at a loss to why it isn't displaying.

<div ng-repeat="x in pers" class="person">
    <div class="name">{{ pers.person }}</div>
    <div class="out">Out</div>
    <div class="in" >In</div>
    <div class="onsite">On site</div>
    <div class="notes">
        <div class='n'></div>
        <div class='dn'>Delete note</div>
        <div class='an'>Add note</div>
    </div>

My controller looks like this.

app.controller("MainController", ['$scope',  function($scope) {
    $scope.pers = [
    {
        person: 'Nick',
    },
    {
        person: "Greg",
    }];
}]);

The repeat function works as expected and two tables are formed, however both the divs with the class name are left without any text in them on the page. I have tried using ng-binding="pers.person" as well without any success.

Thanks in advance for any help you can offer with this issue I'm having.

1
  • 1
    Replace pers.person with x.person in your HTML Commented Sep 9, 2016 at 3:16

1 Answer 1

1

it should be {{x.person}} you are using ng-repeat of pers with the alias x

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

2 Comments

Thanks for that, Makes me feel really simple now I spent so long and didn't figure that out.
you can accept the answer as verified. and you are welcome

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.