Question

我尝试使用angularJS过滤数据但是表格没有显示数据这是我的剧本

var app = angular
          .module("myModule", [])
          .controller("myController", function ($scope) {

              var empolyee = [
              {name: "Amr",gender:  "Male", city:  "Cairo", department: "IT" },
              {name: "Ahmed",gender:  "Male",  city:  "Alexandira", department: "HR" },
              {name: "sara",gender:  "female",  city:  "Luxor", department: "CS" },
              {name: "Osama",gender:  "Male",  city:  "Assuit", department: "IT" },
              {name: "Farah",gender:  "female",  city:  "Cairo", department: "IS" },
              ];

              $scope.empolyees = empolyee;
          });

这是我的html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/Script.js"></script>
    <link href="Style.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        Search : <input type="text" ng-model="searchText" placeholder="search employees"/>
        <br /><br />
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>City</th>
                    <th>Department</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td> {{  employee.name  }} </td>
                    <td> {{  employee.gender  }} </td>
                    <td> {{  employee.city  }} </td>
                    <td> {{  employee.department  }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

结果是 {{employee.name}} {{employee.gender}} {{employee.city}} {{employee.department}} 我想显示数据有什么问题？！

Answer 1

应该是

$scope.employees = empolyee;

取代

$scope.empolyees = empolyee;

你这里有拼写错误 $ scope.empolyees 但是在视野中它是员工

＆＃13;

var app = angular
  .module("myModule", [])
  .controller("myController", function($scope) {
    
   

    var empolyee = [{
      name: "Amr",
      gender: "Male",
      city: "Cairo",
      department: "IT"
    }, {
      name: "Ahmed",
      gender: "Male",
      city: "Alexandira",
      department: "HR"
    }, {
      name: "sara",
      gender: "female",
      city: "Luxor",
      department: "CS"
    }, {
      name: "Osama",
      gender: "Male",
      city: "Assuit",
      department: "IT"
    }, {
      name: "Farah",
      gender: "female",
      city: "Cairo",
      department: "IS"
    }, ];

    $scope.employees = empolyee;            
                    
  });

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>

<body ng-app="myModule">
  <div ng-controller="myController">
    Search :
    <input type="text" ng-model="searchText" placeholder="search employees" />
    <br />
    <br />
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Gender</th>
          <th>City</th>
          <th>Department</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="employee in employees track by $index">
          <td>{{ employee.name }}</td>
          <td>{{ employee.gender }}</td>
          <td>{{ employee.city }}</td>
          <td>{{ employee.department }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

＆＃13;

使用angularjs显示表格数据

1 个答案: