Question

我的HTML中有以下select元素：

<select ng-if="useFlickr" class="span6" ng-model="flickrAlbum" ng-options="item.PhotosetId as item.Title for item in flickrAlbums"></select>

和javascript代码：

function ImageGalleryController($scope, $HttpTransform, ImageGallery, $notification, News, $timeout, $cacheFactory, Flickr) {
  $scope.getFlickrAlbums = getFlickrAlbums;
  function getFlickrAlbums() {
      $scope.flickrAlbums = [{ Title: "Album 1", PhotosetId: "120345" }, { Title: "Album2", PhotosetId: "13244" }];
   }     
}

但我的模型flickrAlbum在更改值时不会更新。

Answer 1

问题是ngIf指令创建了一个新的子范围。结果ng-model="flickrAlbum"您定义了指向内部范围（并且也更新它）。但是，它不会影响原始的外部范围模型。

所以你要么使用$ parent引用来获取原始模型：

<select ng-if="useFlickr" class="span6" 
        ng-model="$parent.flickrAlbum" 
        ng-options="item.PhotosetId as item.Title for item in flickrAlbums"></select> {{ flickrAlbum }}

..或者在控制器中预初始化模型（但是，请注意，您可能需要将整个对象作为ngModel值而不是仅使用PhotosetId作为模型的当前方法）。

Answer 2

您的ng-model变量需要与选项集合分开且不同。然后，您将在控制器中引用该模型以对当前相册执行操作。选择过程不会修改集合本身。

<select ng-if="useFlickr" class="span6" ng-model="selectedAlbum" ng-options="item.PhotosetId as item.Title for item in flickrAlbums"></select>

Angular Docs for ngOptions

Ng模型不在选择内部更新

2 个答案: