AngularJs，根据用户输入将可选参数传递给 URL

Question

我正在尝试使用 AngularJs 使用我的 ASP.NET Web API。问题是我想根据用户输入（2 Html 文本框）将可选参数传递给 url 但我不知道如何。
这是我的 ASP.NET Web API 控制器

[Route("api/JobShow/{keyword}/{location}")]    
public class JobShowController : ApiController
{

    [HttpGet]
    public PageResult<sp_JobSearch_Result> Get(ODataQueryOptions<sp_JobSearch_Result> options, string keyword = null, string location = null)
    {
        ODataQuerySettings settings = new ODataQuerySettings()
        {
            PageSize = 20
        };

        JobWindow obj = new JobWindow();
        IQueryable results = options.ApplyTo(obj.showJobs(keyword, location).AsQueryable(), settings);
        return new PageResult<sp_JobSearch_Result>(
           results as IEnumerable<sp_JobSearch_Result>,
           Request.GetNextPageLink(),
           Request.GetInlineCount());
    }
}

这是我的 AngularJS 控制器

angular.module('JobSearch.SiteController', []).controller('JobSearchCtrl', ['$scope', '$http', function ($scope, $http) {

$http.get('/api/JobShow').success(function (data) {
    $scope.model = data;
});
}]);

url 的示例将是.../api/JobShow/Java/Toronto。谢谢大家

Answer 1

根据您的代码，我假设您有 2 个文本框和一个搜索按钮，并且当按下搜索按钮时，您想调用 GET 端点。对于这种情况，您要做的是将文本框输入绑定到您的作用域，并使用 ng-click 将搜索按钮绑定到您作用域中将调用端点的函数。它可能看起来像这样：

控制器

angular.module('JobSearch.SiteController', [])
.controller('JobSearchCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.getResults= getResults;

    function getResults() {
        $http.get('/api/JobShow/' + $scope.keyword + '/' + $scope.location).success(function (data) {
            $scope.model = data;
        });
    }
}]);

html

<div ng-controller="JobSearchCtrl">
    <input type="text" ng-model="keyword">
    <input type="text" ng-model="location">
    <button type="button" ng-click="getResults()">Search</button>
</div>

Answer 2

你可以试试 ngResource !

你首先需要包含 ng-resource

<script src="angular.js">
<script src="angular-resource.js">

您可以通过 Bower 或 CDN 或任何您获得的方式获得它 AngularJS。

HTML:

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <label>Keyword: <input type="text" ng-model="keyword" /></label>
    <label>Location: <input type="text" ng-model="location" /></label>
    <button ng-click="getJobShowPage(keyword, location)">Search</button>
  </div>
</body>

控制器:

angular
  .module('MyApp', ['ngResource']) // Include the ngResource module here

  .controller('MyCtrl', ['$scope', '$resource', function($scope, $resource){

  // Create the $resource
  var JobShowPage = $resource('/api/JobShow/:keyword/:location', {keyword: "@keyword", location: "@location"})

  // Make a scope function to use the resource properly
  $scope.getJobShowPage = function(keyword, location) {
    var parameters = {};
    if (keyword) {
      parameters["keyword"] = keyword;
      if (location) {
        parameters["location"] = location;
      }
    }
    return JobShowPage.get(parameters);
  };


}]);

Input/Outputs:

当用户不输入任何内容并单击 'Search' 时，HTTP 请求将是 /api/JobShow

如果只输入keyword，HTTP请求会是/api/JobShow/{{keyword}}

如果同时输入 keyword 和 location，则 HTTP 请求将为 /api/JobShow/{{keyword}}/{{location}}

如果仅输入 location（无关键字），HTTP 请求将是原始请求 /api/JobShow

您可以像承诺一样使用 $resource 查询的 return 值：

JobShowPage.get(parameters).$promise.then(function(response){
  // Do Stuff
  $scope.model = response.data;
});

通过回调：

JobShowPage.get(parameters, function(err, response){
  // Do Stuff
  $scope.model = response.data;
});

或自动解包：

// This works, but it's asynchronous
// Useful if consuming directly from the Angular Template
$scope.model = JobShowPage.get(parameters);

AngularJs，根据用户输入将可选参数传递给 URL

AngularJs, Passing optional parameters to the URL based on user input

asp.net-web-api

angularjs

ngroute