AngularJs，根據用戶輸入將可選參數傳遞到URL

我想要使用AngularJs來使用我的ASP.NET Web API。問題是，我想傳遞可選參數到基於用戶輸入（2 Html文本框）的url，但我不知道如何。
這是我的ASP.NET Web API控制器AngularJs，根據用戶輸入將可選參數傳遞到URL

[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控制器的url

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

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

例則是.../API/JobShow /的Java /多倫多。謝謝你們。

來源

2016-04-07 Iman

是你在談論的是可選參數的路徑參數'keyword'和'location'？ – kazenorin

是的，他們是。我在我的API控制器的屬性路由中顯示它。 – Iman

你可以試試ngResource！

你首先需要有NG-資源

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

您可以通過鮑爾或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); 
    }; 


}]);

輸入/輸出：

當用戶進入沒什麼和點擊 '搜索' 時，HTTP請求將是/api/JobShow

如果僅輸入了keyword，如果僅location輸入HTTP請求將/api/JobShow/{{keyword}}

如果同時keyword和location被輸入時，HTTP請求將/api/JobShow/{{keyword}}/{{location}}

（無關鍵字），HTTP請求將是香草一個/api/JobShow

您可以像使用承諾一樣消費$ resource查詢的返回值：

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);

來源

2016-04-07 06:26:31 kazenorin

根據你的代碼，我假設你有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>

來源

2016-04-07 04:34:34

AngularJs，根據用戶輸入將可選參數傳遞到URL

回答

相關問題