Question

我是angularjs的新手，有人可以帮忙解决我的问题。我有一个index.html页面，它有一个徽标和一些消息，以及我有一个文本框，我要求employeeID作为输入。在输入employeeID时，我希望将页面路由到portal.html，我必须在表单中显示员工详细信息。但是表单显示空白输入字段。我使用的是restservice，它将返回一个JSON对象如下

[ { Emp_Id：123， Emp_Name：“abc”，电子邮件：“abc@jkl.com”， Primary_Skill：“angularjs”， } ]

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
<!-- Bootstrap 3 css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Angular.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS/basicPage.css">
</head>
<body ng-app="routeApp">

<div ng-view></div>
</body>
</html>

portal.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Employee Details</p>
<form>
Employee Id : <input type="text" ng-model="empPortal.Emp_Id" required></br></br>
Employee Name : <input type="text" ng-model="empPortal.Emp_Name" required></br></br>
Email Id : <input type="text" ng-model="empPortal.Email" required></br></br>
Primary Skill : <input type="text" ng-model="empPortal.Primary_Skill" required></br></br>
</form>
</body>
</html>

main.html中

<form>
 <div class="text-center">
    <h1 class="ex1">Welcome to the portal!</h1>
    <hr>
  </div>
  <div class="container">
  <div class="row">
    <div class="col-md-3">
      <p>COMPETENCY MANAGEMENT is the system's ability to connect various competencies/skill sets.</p>
    </div>
    <div class="col-md-5">
      <div class="one">
        <h2 class ="ex2">Please enter your Employee ID</h2>
        <label>Employee ID:</label>
        <input ng-model="empID" size= "15" required>
        <button type="submit" class="btn btn-default btn-sm" ng-click="submit()">Submit</button>
       </div>
     </div>
    <div class="col-md-4">
     <img ng-src="{{image}}" class="img-rounded" width="380" height="220"> 
    </div>
  </div>
</div> 
</div>  
</form>

app.js

var routeApp = angular.module("routeApp", ["ngRoute"]);
routeApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "partials/main.html",
        controller : "empDetailsCtrl"
    })
     .when("/submit", {
        templateUrl : "partials/portal.html",
    })
    .otherwise({
        redirectTo:'/'
    });
});

routeApp.controller("empDetailsCtrl",['$scope','$http','$log','$location',function ($scope,$http,$log,$location) {
    $scope.image = "http://hrm-storitve.si/uploads/files/slika_13x.jpg";
    $scope.submit = function(){
        if ($scope.empID != null){
            $http.get('http://localhost:5555/com.vog.jersey.first/rest/empService/getEmployeeDetails?employeeId='+$scope.empID')
                    .success(function(data)
                            {
                          $scope.empPortal = data;
                          $location.path('/submit');
                            })
                     .error(function(err){
                         $log.error(err);
                     })
        }
            else
                {
                $location.path('/');
                }
        };
}]);

如何通过angularjs中的路由填充表单字段

0 个答案: