0

MainController.js

app.controller("mainController", function($scope, $http){
$scope.movies = [];
$scope.searchFilter = '';
$scope.init = function() {

};

$scope.getMovies = function(){
    var movieName = $('#MovieName').val();
    var movies = getMovies(movieName); // Gets json
    $scope.parseMovies(movies);    
};

$scope.parseMovies = function(movies){
    $scope.movies = [];
    $.each(movies, function( index, value ) {
        $scope.movies.push($scope.createMovie(value));
    });
};

$scope.createMovie = function(json){
    Movie=new Object();
    Movie.id=json.id;
    Movie.title=json.title;
    Movie.year=json.year;
    Movie.runtime=json.runtime;
    return Movie;
};

});

app.js

var app = angular.module('MoviesApp',[]);

html

<body ng-controller="MovieListCtrl">    
    <div class="container main-frame" ng-app="MoviesApp" ng-controller="mainController">
        <input type="text" id="MovieName" />
        <input type="button" data-ng-click="getMovies()" />        
        <ul>
            <li ng-repeat="movie in movies">
                {{movie.title}}
            </li>
        </ul>
    </div>    
</body>

ボタンをクリックしてgetMovies()呼び出されると、データは正常に取得されますが、テンプレートは入力されません。ボタンをもう一度クリックしたときにのみ、塗りつぶされます。

2 回目にクリックすると、新しい json が取得される前にテンプレートがいっぱいになります (スクリプトにブレークポイントを設定しました)。

私は立ち往生しています

4

0 に答える 0