angularjs - 当 ng-options 中不存在模型时，将 ng select dropdown model 设置为 null

Question

假设我在 UI 中定义了以下下拉菜单:

<select ng-model="selectedItem" ng-options="item as item.name for item in items track by item.id">
  <option value="">Please select...</option>
</select>

在 Controller 中:

$scope.items = [{name: 'item 1', id: 0}, {name: 'item 2', id: 1}];
$scope.selectedItem;

如果我将 $scope.selectedItem 或模型设置为 items 数组中存在的值，例如{name: 'item 1', id: 1} 然后 Angular 预选 'item 1' 这符合预期。

但是如果我将模型设置为项目数组中不存在的虚假项目，例如$scope.selectedItem = {name: 'item 6', id: 6} 然后 Angular 预选 'Please select...' 这是 UI 中所期望的，但是模型仍然保留{name: 'item 6', id: 6}。

对于带有虚假项目的示例， Angular 是否可以将模型 $scope.selectedItem 设置为 null 而不是 {name: 'item 6'，id:6}？

在我的例子中，$scope.selectedItem对象被保存到数据库中，因此当将来加载它时，我不能保证该对象将存在于$scope中.items 数组。如果该对象不再存在于数组中，我希望 Angular 将模型设置为 null，而不是保留陈旧的对象。

明显的解决方案是检查数组中是否存在该对象，如果不存在，请在 Controller 中手动设置 $scope.selected = null 但想看看是否有更简单的方法或更清洁的选项。

解决方案:

选择使用指令:

.directive('checkForNull', function() {
  return {
    link: function (scope, element, attrs) {
      scope.$watchCollection('items', function(value){
        // if $scope.selectedItem does not exist in items array (value)
        $scope.selectedItem = null;
      })
    }
});

Answer 1

在 Controller 的构造函数中，如果 items 数组中不存在该值，则只需将 $scope.selectedItem 设置为 null:

$scope.items = [{name: 'item 1', id: 0}, {name: 'item 2', id: 1}]; 
$scope.selectedItem = ($scope.items.indexOf($scope.selectedItem) !== -1) ? $scope.selectedItem : null;