Question

我有一个索引页面，其中有一个带有文本字段和搜索按钮的表单。当用户单击搜索按钮时，表单需要获取文本字段的值并使用get方法导航到搜索页面。因此搜索内容将显示在搜索页面的URL中。我需要使用angularjs来做。

请建议我一个方法，或者让我全面了解它是如何运作的。

Answer 1

如果您使用的网站没有阻止跨域请求，那么您可以执行以下操作（实时预览http://codepen.io/larryjoelane/pen/WraEOY）：

HTML：

    <h1>Submit To Search Engine On Key Up</h1>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    Search:
    <input type="text" ng-model="keyword" ng-keyup="search()">
  </form>

  <div ng-bind="results"></div>

</div>

角/ JavaScript的

 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

  //you can change the value of this to someting else like
  //search.html?search=  if you want
  var url = "https://www.google.com/?gws_rd=ssl#safe=active&q=";

$scope.search = function(){
  $http.get(url + $scope.keyword)
    .then(function(response) {
      $scope.results = response;
    }, function(response) {
      $scope.results = "Something went wrong";
    });


};

});

或者如果您希望它将您的get变量汇总到另一个页面而不使用$ http函数，Kaveh建议您可以将Controller更改为以下代码：

HTML：

    <h1>Submit input as http variable(GET) to another page</h1>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    Search:
    <input type="text" ng-model="keyword">
    <input type= "button" value ="search" ng-click="search();">
  </form>

  <div ng-bind="results"></div>

</div>

角/ JavaScript的

 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

  //you can change the value of this to someting else like
  //search.html?search=  if you want
  var url = "search.html?search=";

$scope.search = function(){


   //navigate to another page using keyword model variable
   window.location = url + $scope.keyword;


};

});

Answer 2

我认为您可以使用ui-router模块并使用ui-sref导航到通过搜索字段关键字的搜索页面。

以下是API参考UI-Router

<a ui-sref="pages.search({ search: keyword })" class="btn btn-primary"></a>

Angularjs表单提交并导航到其他页面

2 个答案: