AngularJS ng-options在选择选项后删除了默认空白值

Question

I am using ng-options for my select tag to have choices for the users. 我将ng-options用于我的select标签，以便为用户提供选择。 Everything works perfectly but after selecting an option for the first time the default blank value is gone. 一切正常，但在第一次选择选项后，默认的空白值消失了。 What if I want to revert back to the defaul blank value again? 如果我想再次还原为默认空白值怎么办？ How can that be done? 那怎么办？ How can I retain that blank value? 如何保留该空白值？

Here is an example of my code: 这是我的代码示例：

<!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>

Here is the plunker: http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview 这是the人： http ://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview

Answer 1

use 采用

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

Don't pollute your 'myOptions' with dummy null object, as APIs will not return you the same. 不要用虚拟null对象污染您的“ myOptions”，因为API不会返回相同的结果。 you need to handle it on presentation layer, as shown above. 您需要在表示层上进行处理，如上所示。 while saving, if use selects empty, it will be saved as null (if handled properly) 保存时，如果use选择为空，则将其保存为null（如果处理正确）

also you can have something like this 你也可以有这样的东西

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

Answer 2

Just add blank option to your options and select the blank by default like: 只需将空白选项添加到您的选项中，然后默认选择空白即可，例如：

<!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>

here we add the blank option 在这里我们添加空白选项

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

and select that empty option $scope.mySelection = ''; 并选择该空选项$scope.mySelection = '';

AngularJS ng-options在选择选项后删除了默认空白值

问题描述

2 个解决方案

解决方案1
2 2016-05-16 11:57:08

解决方案2
1 2016-05-16 11:59:20

AngularJS ng-options在选择选项后删除了默认空白值

问题描述

2 个解决方案

解决方案1 2 2016-05-16 11:57:08

解决方案2 1 2016-05-16 11:59:20

解决方案1
2 2016-05-16 11:57:08

解决方案2
1 2016-05-16 11:59:20