Question

我想要做的是：如果用户输入一个值，点击按钮，我的JS调用服务从外部JSON检索数据并对JSON输入的值执行搜索，如果找到匹配项，则显示＆＃39;员工记录＆＃39;。

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

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搜索数据。

Answer 1

这应该有所帮助：

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

您可以根据需要调整样式。

Answer 2

将您的主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更新为（简单用户界面）：

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

我不知道你为什么要在这种情况下使用指令：））

希望我的回答能帮到你！

Answer 3

检查此代码。

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="angular.js@1.0.x" 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 （assets / 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;
}

Angular从外部JSON对象搜索值

3 个答案: