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 が取得される前にテンプレートがいっぱいになります (スクリプトにブレークポイントを設定しました)。
私は立ち往生しています