如何在url中添加/传递文本框值

时间:2015-03-25 16:09:20

标签: javascript angularjs url

<html ng-app="exampleApp">
<head>
    <title>Directives</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.css" rel="stylesheet">
    <script>
            angular.module('exampleApp', [])
            .controller('defaultCtrl', ['$scope', '$http',function ($scope, $http) { 
              $scope.search = search;
              var url = 'http://data.bioontology.org/search?q='+search+'&ontologies=RADLEX&include_properties=false&include_views=false&includeObsolete=false&require_definition=false&exact_match=false&categories';
              // i want to pass the entered text value into this url

                        $scope.testGET = function () {
                        $http({
                                method: 'GET',// get method
                                url: url, // the url goes here
                            headers: { 
                                    'Authorization': 'apikey token=076d0636-694a-47df-bf0d-ccf2489853b4' // Authorization key 
        },
                            }).success(function (data) {
                                  $scope.testGET = data.collection;
                         });
                        }
                    }
                ]);
    </script>
</head>
<body ng-controller="defaultCtrl">
<div class="panel panel-heading">
    <div class="panel-body">
      <input type="text" class="col-md-12" ng-model="search">
        <button ng-click="testGET()">Test GET</button>
    <ul>
        <li ng-repeat="todo in testGET">
          {{todo.prefLabel}}
          {{todo.definition}}
        </li>
      </ul>

    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

在testGET方法中,您可以读取搜索变量的值。

最初你应该把它设置为空字符串。

$scope.search = ''; // not $scope.search = search

然后:

$scope.testGET = function () {
    var url = 'http://data.bioontology.org/search?q=' + $scope.search + '&ontologies=RADLEX&include_properties=false&include_views=false&includeObsolete=false&require_definition=false&exact_match=false&categories';
   // .. the http call.
};

哦..并且在成功方法中做了:

$scope.testGET = data.collection;

你实际上已经覆盖了你的方法。那可能不是你的意思。

这是一个有吸引力的人:

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