选择的AngularJS空值答案

【问题标题】：AngularJS null value for select选择的AngularJS空值
【发布时间】：2014-07-04 08:46:50
【问题描述】：

我找不到使用 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 ：因此未选择第一个选项，默认选择第一个选项后另一个选项消失。

有什么想法吗？

【问题讨论】：

你需要这个简单的null做什么？
你不能使用空值。它不是一个值，角度需要一个值来跟踪。
@creimers null 被JSON specifications 允许。我不想有一些将空字符串转换为 null 的代码（空字符串可能有另一种语义）
angularjs 在默认选择选项时不一致stackoverflow.com/questions/23643712/…

标签： javascript html angularjs

【解决方案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 一起使用。

【讨论】：

此解决方案有效。我做了一个小改动：对象列表在ng-options 标记中定义，以保持我的控制器清洁。谢谢！
我希望进一步解释这个解决方案以了解一切如何运作。
能否请您更新您的 plnkr 以使用更新版本的 Angular？例如，它不适用于 1.4.1 版。

【解决方案2】：

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

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

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

直接在控制器中定义选项列表显然是一个更好的主意。

【讨论】：

【解决方案3】：

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

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

这里的操作部分是第 17 行，定义了一个“颜色”对象，并且 ng-options 属性遍历这些颜色以创建选项。

【讨论】：

【解决方案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>

【讨论】：

这看起来不错，这就是我想做的，但它不起作用。试试这个Plunker。如果您将该值设置为 Yes，然后再设置为 Unknown，您会注意到有一个额外的虚假选项。 @Wawy 的解决方案没有这个问题。

【解决方案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>

【讨论】：

如果您可以在客户端管理选项值，则可以在没有匹配器和范围的情况下实现它：link: function(scope, element, attrs, ngModelController) { ngModelController.$formatters.push(function (value) { return value == null ? 'null' : value;}); ngModelController.$parsers.push(function(value) { return value === 'null' ? null : value; }); } 另外，这将是双向的。

【解决方案6】：

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

> parseInt("") = NaN

> parseInt("0") === 0

> parseInt("1") === 1

【讨论】：

【解决方案7】：

由于无法使用 ng-options，我提出了另一个修复方法。

我几个月来一直在与这个问题作斗争，使用关于这个问题的解决方案，我不知道没有人发布这个：

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

当您使用 ng-repeat 作为选项而不是 ng-options 时，这肯定适用于 Angular 1.6 及更高版本。

这并不理想，但由于我们习惯于处理遗留代码，这个简单的修复可以节省您的时间。

【讨论】：

【解决方案8】：

实现这一点的唯一方法是使用 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

【讨论】：

我不得不不同意......当没有选择任何内容时，nullvalue 比空字符串更有意义。如所选答案所示，这不是“播放”，代码更清晰，因为我没有对空字符串做一些解释。 Null 从前端到数据库为空。
从数据管理的角度来看，您是对的，使用空值是有意义的。当谈论 DOM 和浏览器兼容性是一个更复杂的问题，因为将某些值分配给 null 可能会产生不同的结果和不想要的结果......
我正在处理类似的问题，并且将 value 解析为 null，fwiw

【解决方案9】：

这在您可以使用的 Angular2/Angular 上要容易得多

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

这个值不再是一个字符串，而是一个真正的空值。

【讨论】：