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

Trying to pass $scope.data into a param object from controller to service in Angular

本文关键字：控制器 Angular 服务 对象 data param scope      更新时间：2023-09-26

在我的索引中.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似乎不喜欢在参数中编码&的方式。

  $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};}},

尝试按照我为您完成的。 这真的很容易，谢谢 不错的电影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>
相关文章：