我试图让这段代码在我的select ng-options
中提供一个值:
<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>
但我从来没有看到selectedMovieId
的价值。我尝试在ng模型中添加一个点(类似于foo.selectedMovieId
),但我一直在收到错误。
在阅读了3-4个问题后,我觉得它必须是简单的,我不会错过。
这是我的完整代码:
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");
})*/
}
}]);
和html:
<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>
jsfiddle我一直在努力。为什么赢得ng-model
更新?
答案 0 :(得分:3)
如果没有提供一些数据,演示不起作用但是我怀疑你的问题打破了始终使用ng-model
中的对象的黄金法则
ng-if
创建一个子范围,子范围将破坏原始文件的2路绑定,就像你正在做的那样
在控制器中设置一个对象,这样继承将与后续子范围一起使用,然后在视图中绑定ng-model
到该对象
答案 1 :(得分:1)
@charlietfl的回答很明显。 ng-if
创建了子范围,因此您无法像这样访问selectedMovieId
。
如果出于某种原因需要使用基本类型进行绑定,可以按照以下方式更改绑定(这只是一种解决方法)
<select ng-model="$parent.selectedMovieId" ng-if="movies.length>0" ng-options="movie.id as movie.title for movie in movies track by movie.id">
</select>
它会起作用,因为它使用当前$parent
的隐式$scope
属性。
了解更多: