CODEWITHSUNDEEP
javascriptangularjs
Mr.M
Mr.M

Reputation: 1480

Query on accessing array object from AngularJS

I am new to angularjs currently I am learning how to read array objects and display in view.

HTML Code:

<body ng-app="myDirective" ng-controller="myController">
<div class="container border_bottom">
    {{welcomeMessage}}<br />
    <label>First Name</label> : {{fullname.firstName}}<br />
    <label>Last Name</label> : {{fullname.LastName}}<br />
    Employee Details <br /> 
    <ul>
        <li ng-repeat="emp in employee">
            <div>                    
                <label>Employee ID</label>{{employee.empId}}<br/>
                <label>Employee Name</label>{{employee.empName}}<br/>
                <label>Voter Count</label>{{employee.voteCount}}
            </div>
        </li>
    </ul>

</div>

AngularJS Code:

var myApp = angular.module("myDirective", []);

myApp.controller("myController", function ($scope) {
$scope.welcomeMessage = "Hello ";
$scope.fullname = { firstName: "Mahadevan", LastName: "Sivasubramanian" }

$scope.employee = [
    { empId: 1, empName: "Mahadevan", voteCount: 0 },
    { empId: 2, empName: "john", voteCount: 0 },
    { empId: 3, empName: "Siva", voteCount: 0 }
];
});

I am not getting any error. Where I am doing mistake?

Upvotes: 2

Views: 208

Answers (2)

Charlie
Charlie

Reputation: 23778

You should access the current element by emp in the model of your ng-repeat

<li ng-repeat="emp in employee">
            <div>                    
                <label>Employee ID</label>{{emp.empId}}<br/>
                <label>Employee Name</label>{{emp.empName}}<br/>
                <label>Voter Count</label>{{emp.voteCount}}
            </div>
</li>

ng-repeat simple usage

<div ng-repeat="anElement in anArray">
  {{anElement}}
</div>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222552

You should access emp not employee inside ng-repeat

<li ng-repeat="emp in employee">
                <div>                    
                    <label>Employee ID</label>{{emp.empId}}<br/>
                    <label>Employee Name</label>{{emp.empName}}<br/>
                    <label>Voter Count</label>{{emp.voteCount}}
                </div>
</li>

DEMO

var myApp = angular.module("myDirective", []);
myApp.controller("myController", function ($scope) {
$scope.welcomeMessage = "Hello ";
$scope.fullname = { firstName: "Mahadevan", LastName: "Sivasubramanian" }
$scope.employee = [
    { empId: 1, empName: "Mahadevan", voteCount: 0 },
    { empId: 2, empName: "john", voteCount: 0 },
    { empId: 3, empName: "Siva", voteCount: 0 }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myDirective" ng-controller="myController">
<div class="container border_bottom">
    {{welcomeMessage}}<br />
    <label>First Name</label> : {{fullname.firstName}}<br />
    <label>Last Name</label> : {{fullname.LastName}}<br />
    Employee Details <br /> 
    <ul>
        <li ng-repeat="emp in employee">
            <div>                    
                <label>Employee ID</label>{{emp.empId}}<br/>
                <label>Employee Name</label>{{emp.empName}}<br/>
                <label>Voter Count</label>{{emp.voteCount}}
            </div>
        </li>
    </ul>

</div>

Upvotes: 0

Related Questions