Question

以下是一个简单的代码，我随便编写了通过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"}]
})

输出：

请让我知道我做错了什么。

Answer 1

问题在于你的雇员阵列，你将每个领域作为一个对象。相反，它应该是这样的，

  $scope.employees=[{name: "Gerald",gender:"male", city:"Colorado", country:"USA"}];

<强>样本

＆＃13;

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;

Answer 2

请使用以下代码

  $scope.employees=[{name: "Gerald",gender:"male",city:"Colorado",country:"USA"}]

您定义了一个具有不同索引值的变量，因此在使用 ng-repeat 时，它会使用不同索引的值。这就是您没有进入单行的原因。

Answer 3

您必须在数组中创建单个元素，以便它只迭代一次并仅创建一次行而不是重复4次。

试试这个：

$scope.employees=[{"name":"Gerald", "gender":"male", "city":"Colorado", "country":"USA"}];

而不是

$scope.employees=[{name: "Gerald"},{gender:"male"}, {city:"Colorado"}, {country:"USA"}]

Answer 4

更改您的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>

无法通过ng-repeat获取HTML表格中的一行中的值

4 个答案: