我正在尝试做的是：如果用户输入一个值，单击按钮，我的JS就会调用一项服务，以从外部JSON检索数据，并根据JSON输入的值进行搜索，如果找到匹配项，则显示'Employee记录'。
的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>
JS
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"
};
});
数据杰森
{
"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搜索数据。
检查此代码。
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（资产/data.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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句