如何在Angular.js选择框中使用默认选项

编程 | 2020-12-29 | 编程黑洞网 | 0条评论 | 231 人阅读

我已经搜索过Google，但找不到任何相关信息。

我有此代码。

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

带有类似这样的数据
/>

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

输出是这样的。

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

如何在其中设置第一个选项数据作为默认值，这样您将获得如下结果。

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

如果有一个答案不假定使用angular来构建选项，那就太好了。如果选项已经成为标记的一部分怎么办？

@pspahn-根据docs.angularjs.org/api/ng/directive/ngOptions：仅将一个**硬编码的

#7 楼

我的解决方案是使用html硬编码默认选项。像这样：

在HAML中：

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

在HTML中：

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

我希望我的默认选项从我的api返回所有值，这就是为什么我有一个空白值。还请原谅。我知道这不是OP的问题的直接答案，但是人们可以在Google上找到它。希望这对其他人有帮助。

我已经尝试将其转换为html，但是在我尝试过的所有在线转换器中都失败了。

– iConnor
2014年5月13日在18:09

为什么不发布html？我的意思是，发布这样的代码真的必要吗？这并不是OP在问题中使用模板引擎。

–arg20
14年6月20日在1:03

#8 楼

使用下面的代码填充模型中的选定选项。

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

为我工作过负责为我的选择列表绑定选项的异步调用比带来ng-model的调用慢一点，因此这种方法对我有很大帮助。感谢Eebbesen :-)

–ajaysinghdav10d
16年5月11日在16:11

这对我也适用。简单易懂。

–肯特·阿吉拉尔
16年8月8日在18:00

#9 楼

根据您拥有的选项数量，您可以将值放入数组并像这样自动填充选项

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

#10 楼

就我而言，我只需要插入一个初始值以告知用户选择一个选项，所以，我喜欢下面的代码：

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

当我尝试使用值为！=的空字符串（null）的选项，该选项已替换为angular，但是，当放置这样的选项（具有null值）时，带有该选项的选择就会出现。

对不起，我的英语不好，希望我对此有所帮助。

#11 楼

结合使用select和ngOptions并设置默认值：

有关更多ngOptions用法示例，请参见ngOptions文档。

 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: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body 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.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

有关具有角度数据绑定的HTML SELECT元素的官方文档。

将select绑定到非字符串通过ngModel解析/格式化的值：

 (function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

其他示例：

 angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle

#12 楼

这对我有用。

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

#13 楼

就我而言，因为默认格式因大小写而异。
我在select标记中添加了一个自定义属性。

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

在指令I中创建了一个脚本来检查该值，并在将其填充角度时将其值设置为选定。

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

}）

即时翻译自coffescript，至少不是漏洞，这是正确的。

这不是最简单的方法，但是当值变化时就可以完成

#14 楼

为了回应Ben Lesh的回答，应该有这行

ng-init="somethingHere = somethingHere || options[0]"

，而不是

ng-init="somethingHere = somethingHere || options[0].value"

，

 <select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>

#15 楼

只需按以下方式使用ng-selected="true"：

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

#16 楼

我将在控制器中设置模型。然后，选择将默认为该值。例如：
html：

<select ng-options="..." ng-model="selectedItem">

角度控制器（使用资源）：

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});

#17 楼

这对我有用

ng-selected="true"

最好的方法是使用ng-init，因为您正在设置ngModel。

–萨尔瓦多（Juanjo Salvador）
16-10-26在10:16

#18 楼

如果使用ng-options进行渲染，则默认选择与ng-modal具有相同值的option。
考虑示例：

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

所以默认选择具有相同值list.key和selectedItem的选项。

#19 楼

我需要默认的“请选择”才能取消选择。我还需要能够有条件地设置默认的选定选项。

我通过以下简单的方法实现了此目的：
JS代码：
//翻转这2个代码以测试选择的默认值或不使用默认的“请选择”文本的默认值
//$scope.defaultOption = 0;
$ scope.defaultOption = {键：'3'，值：'Option 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML：

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>

希望对其他有类似要求的人有所帮助。

“请选择”是通过Joffrey Outtier的回答在此处完成的。

#20 楼

如果您有其他事情，而不仅仅是初始化日期部分，则可以通过在控制器中声明ng-init()并在HTML顶部使用它来实现。
此函数将像控制器的构造函数一样工作，并且您可以在那里初始化变量。

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

#21 楼

    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

#22 楼

在您的角度控制器中尝试一下...

$ somethingHere = {name：'Something Cool'};

您可以设置一个值，但是您使用的是复杂类型并且角度将搜索要在您的视图中设置的键/值。

并且，如果不起作用，请尝试以下方法：

#23 楼

我认为最简单的方法是

 ng-selected="$first"

该答案提供了零上下文。

–pspahn
2015年4月9日18:57

如何将JSON转换为XML或将XML转换为JSON？

C ++将字符串（或char *）转换为wstring（或wchar_t *）