JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
<div ng-app="movieApp" ng-controller="movieCtrl">
<input type='text' ng-model='queryString' ng-submit="searchMovie()">
<button ng-click="searchMovie()">
Search
</button>
<hr/>
<select ng-model="selectedMovieId" ng-if="movies.length>0" ng-options="movie.id as movie.title for movie in movies track by movie.id">
</select>
<div>
{{selectedMovieId||'No movie selected'}}
</div>
<button ng-if="movies.length>0" ng-click="getCredits()">
Get Credits
</button>
</div>
CSS
select {
display: block;
}
JavaScript
var app = angular.module("movieApp", []);
app.controller("movieCtrl", ["$scope", "$http", function($scope, $http) {
$scope.apiKey = ''
var baseUrl = 'https://api.themoviedb.org/3/'
$scope.movies = []
$scope.searchMovie = function() {
var url = baseUrl + 'search/movie?api_key=' + $scope.apiKey + '&query=' + $scope.queryString;
$http.get(url)
.then(function(response) {
$scope.movies = response.data.results;
}, function() {
console.log("some error");
})
}
$scope.getCredits = function() {
var url = baseUrl + 'movie/' + $scope.selectedMovieId + '/credits?api_key=' + $scope.apiKey
console.log(url)
console.log($scope.movies)
/*$http.get(url)
.then(function(response) {
console.log(response.data)
$scope.actors = response.data.results;
}, function() {
console.log("some error");
})*/
}
}]);