AngularJS - 如何从GET方法获取数据

时间:2015-02-10 02:18:23

标签: javascript angularjs

我的控制器:

angular.module('apartmentCtrl', [])

.controller('ApartmentController', function ($scope, $http, Apartment) {
    $scope.loading = true;

    $scope.myLocation = '';

    Apartment.get($scope.myLocation).success(function (data) {
        $scope.apartments = data;
        $scope.loading = false;
    });
});

我的服务 angular.module('apartmentService',[])

.factory('Apartment', function ($http) {
    return {
        get: function (myLocation) {
            //return $http.get('/api/apartments');
            return $http({
                method: 'GET',
                url: '/api/apartments',
                //headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                params: {location: myLocation}
            });
        }
    };
});

我的HTML:

<input type="text" name="myLocation" class="form-control" ng-model="myLocation">

如何通过AngularJS从GET方法获取数据并将其传递给params

1 个答案:

答案 0 :(得分:1)

如果要将表单中的某些值作为“位置”传递,则应将其绑定到模型,并将其显式传递给工厂获取函数。

我在这里有一个工作示例,它只是一个窗口警报,显示输入的数据,代替$ http调用,但想法是一样的。

http://plnkr.co/edit/fRra6RfQrSZb8rzrm4XF?p=preview

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <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.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <form ng-submit="getIt()">
      <input type="text" ng-model="myLocation"/>
      <input type="submit"/>
    </form>

  </body>

</html>

使用Javascript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, Apartment) {
  $scope.name = 'World';
  $scope.myLocation = 'Hollywood';

  $scope.getIt = function() {
    Apartment.get($scope.myLocation);
  }
});

app.factory('Apartment', function ($window) {
        return {
            get: function (whatLocation) {
                $window.alert(whatLocation);
            }
        };
    });