angularjs 选择非空选项后，默认选项消失

zf9nrax1 于 2022-10-31 发布在 Angular

关注(0)|答案(2)|浏览(235)

我有一个简单的问题JSFiddle的例子。
在开始我有空/默认选项，但当我从下拉菜单中选择其他东西，这个选项消失。
选择后如何离开此选项？

<label for="mySelect">Make a choice:</label>
 <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions"
      ng-model="data.selectedOption"></select>

Angular 控制器：

.controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };

我曾尝试使用ng-init将默认选项设置为null，但此操作不起作用

angularjs

来源：https://stackoverflow.com/questions/36862098/default-option-disappears-after-select-non-empty-option

2条答案

按热度按时间

pb3s4cty1#

请在select元素内添加空选项元素并进行检查。

<select name="mySelect" id="mySelect"
  ng-options="option.name for option in data.availableOptions"
  ng-model="data.selectedOption">
    <option></option>
  </select>

赞(0）回复(0）举报 2022-10-31

d4so4syb2#

请使用以下方法：

HTML格式

<div ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.id as option.name for option in data.availableOptions"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

天使JS

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: '2' //This sets the default value of the select in the ui
    };

}]);

赞(0）回复(0）举报 2022-10-31

我来回答

angularjs 选择非空选项后，默认选项消失

2条答案

相关问题

热门标签

最新问答