AngularJS ng选项在选择一个选项后删除了默认的空白值

AngularJS ng-options removed default blank value after selecting an option

本文关键字：选项 删除 默认 空白 一个 ng 选择 AngularJS      更新时间：2023-09-26

我使用ng选项作为select标记，以便为用户提供选择。一切都很好，但在第一次选择一个选项后，默认的空白值就消失了。如果我想再次恢复到实际的空白值，该怎么办？如何做到这一点？如何保留空白值？

下面是我的代码示例：

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller="myController">
    <h1>Hello World!</h1>
    <select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
    </select>
  </body>
</html>
<script>
  var app = angular.module('app', []);
  app.controller('myController', function($scope){
    $scope.myOptions = [{
      "value": null,
      "label": null,
    },{
      "value": "First",
      "label": "First",
    },{
      "value": "Second",
      "label": "Second",
    },{
      "value": "Third",
      "label": "Third",
    }]
  });
</script>

以下是plunker：http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview

使用

<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
    <option value=""></option>
  </select>

不要用伪null对象污染您的"myOptions"，因为API不会向您返回相同的结果。您需要在表示层处理它，如上所示。保存时，如果use选择空，它将被保存为空（如果处理得当）

你也可以有这样的

<option value="">---select---</option>

只需在选项中添加空白选项，并默认选择空白选项，如：

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller="myController">
    <h1>Hello World!</h1>
    <select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
    </select>
  </body>
</html>
<script>
  var app = angular.module('app', []);
  app.controller('myController', function($scope){
    $scope.mySelection = '';
    $scope.myOptions = [{
      "value": "",
      "label": "",
    },{
      "value": "First",
      "label": "First",
    },{
      "value": "Second",
      "label": "Second",
    },{
      "value": "Third",
      "label": "Third",
    }]
  });
</script>

在这里我们添加了空白选项

{
  "value": "",
  "label": "",
}

并选择空选项$scope.mySelection = '';

相关文章：