以下是一个简单的代码,我随便编写了通过ng-repeat获取表中的值,但是,ng-repeat填充了不同行中的值。例如:第一元素:第一行;第二个元素:第二行。
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Test</title>
<script type="text/javascript" src="D:\hTML\library\angular.min.js"></script>
<script type="text/javascript" src=D:\hTML\jsemployee.js></script>
</head>
<body ng-controller= "ctrl">
<h1> Table is Table</h1>
<table border="1">
<thead>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="employee in employees| filter:searchText:exactmatch">
<tr >
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.city}}</td>
<td>{{employee.country}}</td>
</table>
</body>
AngularJS:
angular.module('app', []).controller('ctrl', function($scope){
$scope.employees=[{name: "Gerald"},{gender:"male"}, {city:"Colorado"}, {country:"USA"}]
})
输出:
请让我知道我做错了什么。
答案 0 :(得分:1)
问题在于你的雇员阵列,你将每个领域作为一个对象。相反,它应该是这样的,
$scope.employees=[{name: "Gerald",gender:"male", city:"Colorado", country:"USA"}];
<强>样本强>
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.employees=[{name: "Gerald",gender:"male", city:"Colorado", country:"USA"}];
});
&#13;
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>
<body ng-controller="ctrl">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="employee in employees| filter:searchText:exactmatch">
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.city}}</td>
<td>{{employee.country}}</td>
</tr>
</table>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
</body>
</html>
&#13;
答案 1 :(得分:1)
请使用以下代码
$scope.employees=[{name: "Gerald",gender:"male",city:"Colorado",country:"USA"}]
您定义了一个具有不同索引值的变量,因此在使用 ng-repeat 时,它会使用不同索引的值。这就是您没有进入单行的原因。
答案 2 :(得分:0)
您必须在数组中创建单个元素,以便它只迭代一次并仅创建一次行而不是重复4次。
试试这个:
$scope.employees=[{"name":"Gerald", "gender":"male", "city":"Colorado", "country":"USA"}];
而不是
$scope.employees=[{name: "Gerald"},{gender:"male"}, {city:"Colorado"}, {country:"USA"}]
答案 3 :(得分:-1)
更改您的json格式并检查以下代码
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
<table border="1">
<thead>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="employee in employees| filter:searchText:exactmatch">
<tr>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.city}}</td>
<td>{{employee.country}}</td>
</table>
</div>
<script>
angular.module('app', []).controller('ctrl', function ($scope) {
$scope.employees = [{ name: "Gerald", gender: "male", city: "Colorado", country: "USA" }]
})
</script>
</body>
</html>