Question

我有这样的搜索功能，

.controller('searchCtrl', [

  '$scope', 'movieService', 'createMovie', 'removeMovie', '$http', function($scope, movieService, createMovie, removeMovie,  $http) {

    $scope.search = function() {

      var base = 'http://api.themoviedb.org/3';
      var service = '/search/movie';
      var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
      var search = $scope.searchquery
      var callback = 'JSON_CALLBACK'; // provided by angular.js
      var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;

      $http.jsonp(url,{ cache: true}).
        success(function (data, status, headers, config) {

          if (status == 200) {
            $scope.movieList = data.results;
            console.log($scope.movieList)
          } else {
            console.error('Error happened while getting the movie list.')
          }

        }).
        error(function (data, status, headers, config) {
          console.error('Error happened while getting the movie list.')
        });
    }

创建JSON输出like this。这是James Bond Spectre的搜索查询的JSON输出。

这是用户用来搜索电影标题的输入字段。当它发生更改时，会触发执行http请求的search操作。

%input{"ng-change" => "search(searchquery)", "ng-model" => "searchquery", "ng-model-options" => "{ debounce: 500 }", :id => "search_input", :placeholder => "Search a movie!", "ng-keyup" => "clear_results()"}

这是我显示搜索结果的地方。

%ul#showresults
  %li.search_results{"ng-repeat" => "movie in movieList | orderBy:'-release_date'"}

    .addmovie{"ng-click" => "addMovie()"}
      %span
        Add Movie
    %img.poster{"ng-src" => "http://image.tmdb.org/t/p/w500/{{ movie.poster_path }}"}
    %span.movieID
      {{ movie.id }}
    %span.title
      {{ movie.original_title }}
    %span.release
      {{ movie.release_date }}

当用户点击.addmovie元素时，它会触发addMovie操作，

$scope.addMovie = function() {

  createMovie.create({
    title: $(event.currentTarget).parent().find('.title').text(),
    release_date: $(event.currentTarget).parent().find('.release').text(),
    image: $(event.currentTarget).parent().find('.poster').attr("src")
  }).then(init);
};

现在我们正在解决这个问题。 create动作查看元素的值，然后将其保存到数据库中。但是有一些信息，比如我不希望在结果中显示的电影ID，我如何直接从JSON文件中访问它？

Answer 1

这里的问题是不适合jQuery的工作流程。将模型数据存储在DOM中并从那里读取它是没有道理的。

可能有更简洁的方法可以完全不使用索引（例如，在单独的指令中隔离列表项），但类似

  ...
  %li.search_results{"ng-repeat" => "movie in movieList | orderBy:'-release_date'"}
    .addmovie{"ng-click" => "addMovie($index)"}
  ...

和

$scope.addMovie = function(i) {
  var movie = $scope.movieList[i];
  createMovie.create({
    title: movie.title,
    ...
  }).then(init);
};

对于初学者来说是可以接受的。

如何直接访问JSON文件中的数据？

1 个答案: