javascript - 为什么我选择的 ng-model 不反射(reflect)我选择的 ng-option？

Question

我正在尝试获取此代码以在我的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 不更新？

Answer 1

如果没有提供一些数据，演示将无法运行，但我怀疑您的问题违反了始终在 ng-model 中使用对象的黄金法则

ng-if 创建一个子作用域，子作用域将像您当前正在做的那样打破基元上的 2 种方式绑定(bind)

在 Controller 中设置一个对象，以便继承将适用于后续的子作用域，然后在 View 中将 ng-model 绑定(bind)到该对象