查询从 AngularJS 访问数组对象

我是angularjs的新手，目前我正在学习如何读取数组对象并在视图中显示。

网页代码：

<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 代码：

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

我没有收到任何错误。我哪里做错了？

您应该通过在 ng-repeat 模型中emp来访问当前元素

<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-重复简单用法

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

您应该访问emp而不是employee内部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>

演示

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>

相关内容

最新更新

热门标签：