Lo que estoy tratando de hacer: si el usuario ingresa un valor, al hacer clic en el botón, mi JS llama a un servicio para recuperar datos de un JSON externo y realizar una búsqueda del valor ingresado en el JSON y si se encuentra una coincidencia, muestre el 'Empleado Grabar'.

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"
}]
}

Tengo que buscar datos basados en empno.

0
Sanjay Kumar 23 dic. 2016 a las 11:08

3 respuestas

La mejor respuesta

Revisa este código.

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;
}
0
Smith Lee 26 dic. 2016 a las 01:21

Actualice su HTML principal a:

<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>
  • El usuario ng-submit para ambos casos es enviar formulario y hacer clic para buscar.
  • En ng-if="empDetails", asegúrese de que la respuesta devuelta sea un objeto (si tiene un empleado) o nulo. Si la respuesta devuelve un objeto vacío (si no se encuentra el empleado), puede usar esta condición ng-if="empDetails && empDetails.id"

Actualice el controlador principal a:

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

Actualice su directiva a:

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

Actualice emp-details.html a (interfaz de usuario simple):

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

No sé por qué quieres usar la directiva en este caso :))

Espero que mi respuesta te ayude!

0
WorkWe 23 dic. 2016 a las 09:18

Esto debería ayudar:

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

Puedes ajustar los estilos como quieras.

0
salix 23 dic. 2016 a las 08:59