Question

我无法使用AngularJS找到使用null设置<select>值的优雅方法。

HTML：

<select ng-model="obj.selected">
  <option value=null>Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

{{obj}}

JS：

$scope.obj ={"selected":null};

加载页面时，会选择第一个选项，这是好的，输出为{"selected":null}。在切换到另一个选项后重新选择第一个选项时，输出变为{"selected":"null"}（带引号），这不是我所期望的。

运行示例： http://plnkr.co/edit/WuJrBBGuHGqbKq6yL4La

我知道标记<option value=null>不正确。我也尝试使用<option value="">，但它对应于一个空字符串而不是null：因此，第一个选项未被选中，而另一个选项在默认选择第一个选择后消失。

有什么想法吗？

Answer 1

这应该适合你：

控制器：

  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objects = [{id: 1, value: "Yes"}, {id: 0, value: "No"}]
  }

模板：

  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected"
            ng-options="value.id as value.value for value in objects">
            <option value="">Unknown</option>
    </select>

<br/>
     {{obj}}
  </div>

Working plnkr

您应该将ng-options与select。

一起使用

Answer 2

您可以在select上使用ngOptions指令。根据文件：

可选地，单个硬编码的<option>元素（其值设置为空字符串）可以嵌套到<select>元素中。然后，此元素将代表null或＆＃34;未选择＆＃34;选项。请参阅下面的示例进行演示。

<select ng-model="obj.selected" ng-options="key as label for (key, label) in ['No', 'Yes']">
  <option value="">Unknown</option>
</select>

直接在控制器中定义选项列表显然更好。

Answer 3

尝试使用ng-options而不是手动创建标记，如本例所示，从Angular文档轻微编辑：

http://plnkr.co/edit/DVXwlFR6MfcfYPNHScO5?p=preview

这里的操作部分是第17行，定义了颜色＆＃39; object和ng-options属性迭代这些颜色以创建选项。

Answer 4

如果您真的想使用null，请参阅下文。您需要使用ng-options并让Angular处理映射：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color selector</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>

</head>
<body ng-app="">
    <script>
  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objStates = [{key:"Unknown", value:null}, {key:"Yes", value:1}, {key:"No", value:0}]

    $scope.$watch('obj.selected', function(newVal){
      console.log(newVal);
    })
  }
  </script>
  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected" ng-options="state.value as state.key for state in objStates">
    </select>

<br/>
     {{obj}}
  </div>
</body>
</html>

Answer 5

我遇到了同样的问题但无法通过'ng-options'解决它。我的解决方案是：

module.directive('modelToNull', [function () {
    return {
        scope: {
            check: "&modelToNull"
        },
        require: 'ngModel',
        link: function ($scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (value) {
                return value == null || $scope.check({value: value}) ? null : value;
            });
        }
    };
}]);

你可以像这样使用它：

<select ng-model="obj.selected" model-to-null="value == 'null'">
  <option value="null">Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

Answer 6

您可以尝试在值上使用parseInt吗？例如，"1"和"0"都将等于它们各自的整数值。如果您通过parseInt运行空字符串，则可以轻松获得NaN。

> parseInt("") = NaN

> parseInt("0") === 0

> parseInt("1") === 1

Answer 7

Angular2 / Angular上的这个更容易使用

<option [value]="null">Unknown</option>

此值不再是字符串，而是实际的空值。

Answer 8

无法使用ng-options，我提出了另一个解决方案。

我已经使用这个问题上提出的解决方案与之抗争了几个月，我不知道没人会这样发布：

<option value="null"></option>

当您使用ng-repeat代替ng-options时，这应该可以在Angular 1.6及更高版本上使用。

这不是理想的选择，但是由于我们习惯于处理遗留代码，因此这种简单的修复方法可以节省您的时间。

Answer 9

唯一可以实现的方法是使用onchange事件并将对象恢复为初始化任何其他尝试将selected设置为null将从对象中删除属性。

$scope.setValue=function(val){
  if($scope.obj.selected=="null")
     $scope.obj ={"selected":null};
}

<select ng-change="setValue()" ng-model="obj.selected">
  <option value=null ng-click="obj.selected=null">Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

这是一个坏主意，你应该总是在你的模型中有值而不是玩null和undefined

AngularJS为null的null值

9 个答案: