为什么我选择的ng-model无法反映我选择的ng-option? [英] Why does my select ng-model not reflect my selected ng-option?
问题描述
我正在尝试获取此代码以在我的 select ng-options
中提供一个值:
I'm trying to get this code to provide a value in my 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
),但我一直收到错误消息.
But I never see a value for selectedMovieId
. I've tried adding a dot to the ng model (something like foo.selectedMovieId
) but I keep getting errors.
已经阅读了3-4个问题,我觉得这很简单,我很想念.
Having read 3-4 questions on this I feel like it has to be something simple I'm missing.
这是我的完整代码:
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不会
更新?
And the jsfiddle I've been working in. Why won't the ng-model
update?
推荐答案
在没有提供某些数据的情况下,Demo无法工作,但是我怀疑您的问题打破了始终在 ng-model中使用对象的黄金法则代码>
Demo doesn't work without some data provided however I suspect your problem is breaking the golden rule of always using an object in ng-model
ng-if
创建一个子作用域,并且该子作用域将像您当前正在使用的那样破坏原语上的2种方式绑定
ng-if
creates a child scope and child scopes will break 2 way bindings on primitives like you are currently doing
在控制器中设置一个对象,以便继承可用于后续子作用域,然后在视图中将 ng-model
绑定到该对象
Set an object in controller so inheritance will work with subsequent child scopes and then in view bind ng-model
to that object
这篇关于为什么我选择的ng-model无法反映我选择的ng-option?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!