3

i tried to filter data using angularJS but table didn't display the data this is my script

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

and this is my html page

<!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>

the result is {{ employee.name }} {{ employee.gender }} {{ employee.city }} {{ employee.department }} i want to display the data what's the problem ?!

8
  • What do you see in the console? Commented Jan 16, 2017 at 21:10
  • The program '[8216] iisexpress.exe: Program Trace' has exited with code 0 (0x0). The program '[8216] iisexpress.exe' has exited with code 0 (0x0). >>>>>>> the table is drawn but data is replaced with {{employee.row}} Commented Jan 16, 2017 at 21:13
  • Try opening Developer Tools. What do you see in the DevTools console? Commented Jan 16, 2017 at 21:21
  • U mean MDN ? then ? Commented Jan 16, 2017 at 21:24
  • No, Developer Tools. (Right Click -> Inspect) Commented Jan 16, 2017 at 21:25

1 Answer 1

0

It should be

$scope.employees = empolyee; 

in place of

$scope.empolyees = empolyee;

you have a spelling mistake here $scope.empolyees but in view it is employees

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

Sign up to request clarification or add additional context in comments.

4 Comments

the same result
@Amr : what changes you have made? check the snippet based on your code in the answer. it does work
the problem was i miss to add angular.min.js .. and your answer should be true else :) .. thx
Okk, thats why. I was surprised why it did not work for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.