Question

在我的index.html中，我有这个：

<input type="text" ng-model="title" placeholder="Search..." >
<button type="submit" href="#" ng-click="getSearch()">Submit</button>
<select ng-model="selected" ng-options="obj.val as obj.display for obj in things"></select>

和我的控制员：

$scope.getSearch = function(){
   svc.search($scope.selected)
    .then(function(response){
     $scope.searchData = response;
     });
  };

$scope.things = [
  {display: 'Movie',
  val: {s: $scope.title}},
  {display: 'Series',
  val: 'series'},
  {display: 'Epsiode',
  val: 'episode'},
];

最后我的服务：

this.search = function(params){
  return  $http.get('http://www.omdbapi.com/',params)
    .then(function(response) {
     var results = response.data.Search;
     return results;
   });
  };

好吧，看起来我几乎可以上班了。现在，这一切都有效，除了似乎omdbapi不喜欢和＆amp;在params编码。

  $scope.getSearch = function(){
svc.search($scope.selected())
.then(function(response){
  $scope.searchData = response;
});


};

  $scope.things = [
  {display: 'Movie',
  val: function(){return {'type=movie&s': $scope.title};}},
    {display: 'Series',
    val: function(){return {'type=series&s': $scope.title};}},
  {display: 'Epsiode',
  val: function(){return {'type=episode&s': $scope.title};}},
];

我们有答案！当然，一旦我发布，我就把它搞清楚了......已经过了太长时间了。

  val: function(){return {type: 'movie',s: $scope.title};}},

Answer 1

尝试按照我为你完成的操作。它真的很容易，感谢很好的电影api

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

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>

</head>
    <body ng-controller="MainCtrl">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <form>
                        <div class="form-group">
                            <label>Choose type</label>
                            <select class="form-control" ng-model="title">
                                <option ng-repeat="x in things">{{x.type}}</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Title (Minimum 2 chars) : </label>
                            <input type="text" ng-model="search_keyword" class="form-control"/>        
                        </div>

                        <button class="btn" ng-click="search_movie()">
                            Search movie
                        </button>
                    </form>      
                </div>            
            </div>
        </div>
        <div class="container">
            <pre>
            {{result | json}}
            </pre>    
        </div>

    </body>
</html>

<script type="text/javascript">
    var app = angular.module('plunker', []);
    app.controller('MainCtrl', function($scope,$http) 
    {   
        $scope.search_keyword = '';
        $scope.title = '';

        $scope.things = [{type:'movie'},{type:'series'},{type:'episode'}];   

        $scope.search_movie = function()
        {
            console.log($scope.search_keyword+""+$scope.title); 

            $http.get('http://www.omdbapi.com?t='+$scope.title+"&h="+$scope.search_keyword)
            .then(function(response) 
            {
                $scope.result = response.data;
            });  
        }

    });
</script>

试图将$ scope.data传递给Angular中从控制器到服务的param对象

1 个答案: