2016-09-23 41 views
0

夥計們,我是Angular JS的新手。我正在嘗試在角度js上搜索非常小的POC。

我有一個範圍變量,稱爲searchText這不是未定義的,但我不知道這裏有什麼錯。

HTML

<!DOCTYPE html> 
<html ng-app="myEmp"> 
<head> 
    <title>AJS Event Handler</title> 
    <script src="../AngularJS/angular.js"></script> 
    <script src="search.js"></script> 
    <style type="text/css"> 

    table { 
     border-collapse: collapse; 
     font-family: Arial; 
    } 

    table, td { 
     border: 1px solid black; 
     padding: 5px; 
     text-align: left; 
    } 

    th{ 
     border: 1px solid black; 
     padding: 5px; 
     text-align: left; 
     cursor: pointer; 
    } 

</style> 
</head> 
<body ng-controller="myController"> 
<input type="text" ng-model="searchText" placeholder="search by name and city"> 
<br/> 
<br/> 
<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>DOB</th> 
      <th>Gender</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="emp in employees | filter:search"> 
      <td>{{ emp.fName }}</td> 
      <td>{{ emp.dob | date:"dd/MM/yyyy" }}</td> 
      <td>{{ emp.gen }}</td> 
      <td>{{ emp.salary | number:2 }}</td> 
     </tr> 
    </tbody> 
</table> 

</body> 
</html> 

JS

// create the module, create controller and register controller to module in one line 
angular .module("myEmp", []) 
     .controller("myController", function($scope){ 
      var employees = [ 
       {fName: 'Soham', dob: new Date("may 23,1990"), gen: 'Male', salary: 10000.506666}, 
       {fName: 'Shardha', dob: new Date("may 23,1995"), gen: 'Female', salary: 10555000.50}, 
       {fName: 'Bhagya', dob: new Date("april 23,1999"), gen: 'Male', salary: 4343.50}, 
       {fName: 'Soham', dob: new Date("may 23,1999"), gen: 'Female', salary: 10043434500.50} 
      ]; 

      $scope.employees = employees; 
      $scope.searchText = undefined; 

      $scope.search = function(item){ 
       if($scope.searchText == undefined){ 
        return true; 
       }else{ 
        console.log($scope.searchText); 
        if($scope.searchText && item.fName.indexOf($scope.searchText) != -1 || 
         $scope.searchText && item.city.indexOf($scope.searchText) != -1){ 
         return true; 
        } 
       } 
       return false; 
      } 
     }); 
+1

項目沒有城市作爲關鍵,因此它顯示錯誤。爲員工列表中的對象定義城市 – Hmahwish

回答

1

有一個在員工無市場。只是做一個現場檢查,然後做索引

angular .module("myEmp", []) 
    .controller("myController", function($scope){ 
     var employees = [ 
      {fName: 'Soham', dob: new Date("may 23,1990"), gen: 'Male', salary: 10000.506666}, 
      {fName: 'Shardha', dob: new Date("may 23,1995"), gen: 'Female', salary: 10555000.50}, 
      {fName: 'Bhagya', dob: new Date("april 23,1999"), gen: 'Male', salary: 4343.50}, 
      {fName: 'Soham', dob: new Date("may 23,1999"), gen: 'Female', salary: 10043434500.50} 
     ]; 

     $scope.employees = employees; 
     $scope.searchText = undefined; 

     $scope.search = function(item){ 
      if($scope.searchText == undefined){ 
       return true; 
      }else{ 
       console.log($scope.searchText); 
       if($scope.searchText && (item.fName.indexOf($scope.searchText) != -1 || item.city && item.city.indexOf($scope.searchText) != -1)){ 
        return true; 
       } 
      } 
      return false; 
     } 
    }); 
相關問題