Angular從外部JSON對象搜索值

我在做什麼：如果用戶輸入一個值，在按鈕單擊時，我的JS調用一個服務從外部JSON檢索數據，並對輸入的值對JSON執行搜索如果找到匹配項，則顯示「員工記錄」。Angular從外部JSON對象搜索值

HTML

<body ng-app="sampleapp"> 
     <div ng-controller="emp"> 
     <form class="form-inline"> 
      <div class="form-group"> 
      <label>Enter Employee Number:</label> 
      <input type="text" class="form-control" ng-model="searchemp"> 
      </div> 
      <button class="btn btn-primary" ng-click="doSearch();">Search</button> 
     </form> 
     <div emp-details ng-if="empno!=undefined"></div> 
     </div> 
    <body>

var app = angular.module('sampleapp',[]); 

app.controller("emp", ["$scope", "empService", function($scope, empService) { 
    $scope.doSearch = function() { 
     empService.findemployeeById($scope.searchemp ,function(r){ 
      $scope.quesData = r.empno; 
      $scope.empname = r.empname; 
      $scope.sal = r.sal; 
      $scope.deptno = r.deptno; 
      $scope.hiredate = r.hiredate; 
      $scope.dob = r.dob; 
     }); 
    };  
}]); 

app.service("empService",['$http','$log', function($http,$log) { 
    this.findemployeeById = function(empno,cb) { 
     $http({ 
      url: 'assets/data.json', 
      method:'GET' 
      }).then(function(resp){ 
       $log.log(resp.data); 
       cb(resp.data) 
      }, function(resp){ 
       console.error("Error Occuerd"); 
     }); 
    }; 
}]); 

app.directive("empDetails", function() { 
    return { 
     templateUrl:"emp-details.html" 
    }; 
});

Data.Json

{ 
    "quesData": [{ 
    "id": 1, 
    "empname": "John", 
    "sal":"3000", 
    "deptno":"TRI", 
    "hiredate":"10-June-2016", 
    "dob":"14-June-1990" 
}, 
{ 
    "empno": 2, 
    "empname": "asdasd", 
    "sal":"3000", 
    "deptno":"TRI", 
    "hiredate":"10-June-2016", 
    "dob":"14-June-1990" 
}] 
}

我要搜索基於EMPNO數據。

來源

2016-12-23 Sanjay Kumar

檢查此代碼。

HTML（index.html的）

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-app="sampleapp"> 
    <div ng-controller="emp"> 
     <form class="form-inline"> 
     <div class="form-group"> 
      <label>Enter Employee Number:</label> 
      <input type="text" class="form-control" ng-model="searchemp"> 
     </div> 
     <button class="btn btn-primary" ng-click="doSearch();">Search</button> 
     </form> 
     <div emp-details ng-show="searchemp"></div> 
    </div> 
    <body> 

</html>

HTML（EMP-details.html）

<table> 
    <tr> 
     <th>EmpNo.</th> 
     <th>Name</th> 
     <th>Salary</th> 
     <th>DeptNo.</th> 
     <th>Hire Date</th> 
     <th>Dob</th> 
    </tr> 
    <tr> 
     <td>{{empItem.empno}}</td> 
     <td>{{empItem.empname}}</td> 
     <td>{{empItem.deptno}}</td> 
     <td>{{empItem.hiredate}}</td> 
     <td>{{empItem.dob}}</td> 
    </tr> 
</table>

JS（app.js）

var app = angular.module('sampleapp',[]); 

app.controller("emp", ["$scope", "empService", function($scope, empService) { 

    $scope.doSearch = function() { 
     empService.findemployeeById($scope.searchemp, function(r) { 
      console.log('response=' + angular.toJson(r, true)); 
      $scope.empItem = {}; 
      $scope.empItem = r; 
     }); 
    };  
}]); 

app.service("empService",['$http','$log', function($http,$log) { 
    this.findemployeeById = function(empno,cb) { 
     $http({ 
      url: 'assets/data.json', 
      method:'GET' 
      }).then(function(resp){ 
       angular.forEach(resp.data.quesData, function(valObj, key) { 
        if(valObj.empno == empno) { 
         $log.log(valObj); 
         cb(valObj); 
        } 
       }); 
      }, function(resp){ 
       console.error("Error Occuerd"); 
     }); 
    }; 
}]); 

app.directive("empDetails", function() { 
    return { 
     templateUrl:"emp-details.html" 
    }; 
});

JSON（資產/數據。JSON）

{ 
    "quesData": [{ 
     "empno": 1, 
     "empname": "John", 
     "sal":"3000", 
     "deptno":"TRI", 
     "hiredate":"10-June-2016", 
     "dob":"14-June-1990" 
    }, 
    { 
     "empno": 2, 
     "empname": "asdasd", 
     "sal":"3000", 
     "deptno":"TRI", 
     "hiredate":"10-June-2016", 
     "dob":"14-June-1990" 
    }] 
}

CSS（style.css文件）

body { 
    font-size:12px; 
} 
table { 
    border:1px solid #124467; 
    color:#495969; 
} 
table th { 
    background-color:#efefef; 
}

來源

2016-12-23 09:23:35

Hi @Smith Lee在控制檯中，我可以根據輸入的數據查看數據。但templateURL沒有獲取數據。我如何顯示模板URL。請幫忙。 –

Hi @ Hardik一切工作正常，但在templateUrl中獲取相同的數據。就像我輸入1一樣，TemplateURL –

也顯示太晚了？我再次編輯了我的帖子。它工作正常。 :-) –

這應有助於：

<div emp-details ng-if="quesData!=undefined"> 
    Employee No: {{quesData}} <br/> 
    Employee Name: {{empname}} <br/> 
    Salary: {{sal}} <br/> 
    Department No: {{deptno}} <br/> 
    Hire Date: {{hiredate}} <br/> 
    Date of Birth: {{dob}} 
</div>

但是您可以根據需要調整的樣式。

來源

2016-12-23 08:16:56 salix

更新您的主HTML到：

<body ng-app="sampleapp"> 
    <div ng-controller="emp"> 
    <form class="form-inline" ng-submit="doSearch()"> 
     <div class="form-group"> 
     <label>Enter Employee Number:</label> 
     <input type="text" class="form-control" ng-model="searchemp"> 
     </div> 
     <button class="btn btn-primary" type="submit">Search</button> 
    </form> 
    <emp-details ng-if="empDetails" emp-details="userDetails"></emp-details> 
    </div> 
<body>

用戶ng-submit這兩種情況下都表單提交，然後點擊搜索按鈕。
在ng-if="empDetails"，確保響應返回是一個對象（如果有員工）或null。如果響應返回一個空對象（如果沒有找到員工），您可以使用此條件ng-if="empDetails && empDetails.id"

更新主控制器到：

app.controller("emp", ["$scope", "empService", function($scope, empService) { 
    $scope.doSearch = function() { 
     empService.findemployeeById($scope.searchemp ,function(emp){ 
      $scope.empDetails = emp; 
     }); 
    };  
}]);

更新您的指令：

app.directive("empDetails", function() { 
    return { 
     restrict: 'E', 
     templateUrl:"emp-details.html", 
     scope: { 
      empDetails: '=' 
     } 
    }; 
});

更新emp-details.html（簡單UI）：

<p>Employee ID: {{empDetails.id}} </p> 
<p>Employee Name: {{empDetails.empname}}</p> 
<p>Salary: {{empDetails.sal}}</p> 
<p>Department No: {{empDetails.deptno}}</p> 
<p>Hire Date: {{empDetails.hiredate}}</p> 
<p>Date of Birth: {{empDetails.dob}}</p>

我不知道你爲什麼要在這種情況下使用指令:)）

希望我的回答能幫助你！

來源

2016-12-23 09:18:18 WorkWe

嗨@WorkWe感謝更新。仍然獲得空白數據..你可以請幫助我如何使用我已經使用的服務在DOM中獲取deta。 –

請更新您的Data.Json格式。這是不對的。給我'resp.data'。謝謝。 – WorkWe

resp.data是Object {quesData：Array [2]}。如果有其他地方我會出錯，請讓我。 –

Angular從外部JSON對象搜索值

回答

相關問題