Question

var app = angular.module("app", []);

app.controller('emp', ['$scope', 'empService', function($scope, empService){
    $scope.doSearch = function(){
        empService.findEmployeeById($scope.searchempno, function(r){
            $scope.empno = r.empno;
            $scope.ename = r.ename;
            $scope.salary = r.salary;
            $scope.dptno = r.dptno;
        });
    };
}]);

app.service('empService', ['$http', '$log', function($http, $log){
    this.findEmployeeById = function(empno, cb){
        $http({
            url: 'employees.json' + empno,
            method: 'GET'
        }).then(function(resp){
            cb(resp.data);
        });
    };
}]);

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body ng-app="app">
        <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="searchEmpno"/>
                </div>
                <button class="btn btn-primary" ng-click="doSearch()">Search</button>
            </form>
            <hr>
            <div class="row">
                <div class="col-sm-2">Employee No</div>
                <div class="col-sm-2">{{empno}}</div>
            </div>
            <div class="row">
                <div class="col-sm-2">Employee Name</div>
                <div class="col-sm-2">{{ename}}</div>
            </div>
            <div class="row">
                <div class="col-sm-2">Salary</div>
                <div class="col-sm-2">{{salary}}</div>
            </div>
            <div class="row">
                <div class="col-sm-2">Deptno</div>
                <div class="col-sm-2">{{dptno}}</div>
            </div>
        </div>
    </body>
</html>

如果我在输入字段中给出了数字，如1001，请单击搜索按钮。它不会显示细节。我检查了控制台，没有错误。我的JSON文件已放置在HTML文件的相同位置。

谢谢， SamBhishma

Answer 1

我创建了一个更新的plunker here。第一个问题是我在评论中提到的。在您看来，您正在撰写<input type="text" class="form-control" ng-model="searchEmpno"/>，并且在您的控制器中，您尝试以searchempno

的形式访问此变量

第二个问题出在您的http请求中。您无法根据ID从json文件中选择数据。您必须获取整个JSON文件，解析它并过滤掉与searchEmpno模型值匹配的值。我把它固定在了羽毛球上。

第三个issue，您将简单值附加到范围，例如$scope.empno，$scope.ename。相反，您需要将这些值放入对象中，因此在控制器中，将匹配的员工对象放在范围和视图中，将其引用为{{obj.ename}}，依此类推。

另外一件事，就是不需要在里面返回回调。处理成功的失败http调用的简洁方法是：

$http.get('url').then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

详细了解他们here。

查看更新的plunker，看它是否符合您的需求。

Answer 2

问题是你的模型变量在视图中是错误的，试试这个

<input type="text" class="form-control" ng-model="searchEmpno"/>

DEMO

如何使用Angularjs从JSON获取数据？

2 个答案: