3

假设我在 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>

在控制器中：

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

如果我将$scope.selectedItem模型设置为项目数组中存在的值，例如，{name: 'item 1', id: 1}那么角度预选'item 1'是预期的。

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

对于带有伪造物品的示例，是否有角度将模型设置$scope.selectedItem为null而不是{name: 'item 6', id: 6}？

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

明显的解决方案是检查对象是否存在于数组中，如果不存在，则$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;
      })
    }
});
4

1 回答 1

0

在控制器的构造函数中，如果 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;
于 2014-10-08T13:38:16.847 回答