Question

我试图从Web API获取数据并将其显示在表格中，但它并不起作用。我是angularjs的新手，我编写简单的程序来从Web API获取数据并显示在表格中。但我无法获取数据。

模块

    var app = angular.module("myApp", []);

服务

    app.service("myService", function ($http) {
        //get All Eployee
        this.getEmployees = function () {
            return $http.get('http://apidemo.gouptechnologies.com/api/admin');
        };
    })

控制器

    app.controller("myCntrl", function ($scope, myService) {
        $scope.divEmployee = false;
        GetAllEmployee();
        function GetAllEmployee() {
            alert('home');
            var getData = myService.getEmployees();
            getData.then(function (emp) {
                $scope.employees = emp.data;
            }, function () {
                alert('Error in getting records');
            });
        }
    });

JS代码包含在HTML文件的head标记中。

HTML正文

<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        <ul>
            <li ng-repeat="x in employees">
                {{ x.username + ', ' + x.password }}
            </li>
        </ul>
    </div>
</body>

API URL是合法的。感谢。

Answer 1

让示例在“data / branchList.json”目录中的json文件，并且我尝试使用$http从json文件访问所有数据。它可以帮助你打电话给休息服务。查看此示例

<强> 数据/ branchList.json

[
  {
    "branch_id": 1,
    "branch_name": "Mummbai",
    "branch_address": "India"
  },
  {
    "branch_id": 2,
    "branch_name": "New York",
    "branch_address": "US"
  }
]

<强> 控制器

angular.module('myApp')
    .controller('myCntrl', ['$http', '$state', function ($http, $state) {

        'use strict';

        var vm = this;

        function init(){

            vm.branchs  = '';

            loadBranch();
        }
        init();

        function loadBranch(){
            $http.get('data/branchList.json').success(function(response){

                vm.branchs = response;
            })
        }
    }]);

在此示例中，我将所有数据存储在vm.branches变量中，您可以在html页面中使用此变量

<强> HTML

<li class="col-sm-6" ng-repeat = "branch in vm.branchs">

   <strong>{{branch.branch_name}}</strong>

   <span>{{branch.branch_address}}</span>
</li>

使用AngularJS从API检索JSON数据

1 个答案: