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


311

我已经搜索过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>

3
如果有一个答案不假定正在使用angular来构建选项,那就太好了。如果选项已经成为标记的一部分怎么办?
pspahn 2015年

1
@pspahn-根据docs.angularjs.org/api/ng/directive/ngOptions:仅a **single** hard-coded <option> element ... can be nested into the <select> element.选项不能成为标记的一部分。
DIMM收割机

1
@pspahn不会回答OP,而是一个完全不同的问题……
Mario Trucco

Answers:


366

您可以像这样简单地使用ng-init

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

20
我在工作时遇到问题,就是我在使用“跟踪依据”,将其删除解决了该问题,以防万一可以帮助某人:D
DrCord 2014年

61
这个答案没有问题,但是ng-init在我的特定情况下对我来说失败了。问题是我正在使用的值在ng-init运行时尚不可用:我通过ajax调用获得了该值,而此时ng-init已经完成。最后,我对该值使用了监视程序,并且在该函数中执行的操作与ng-init中的操作相同。那行得通。
maurits 2014年

2
我也没有解决这个问题,@ maurits的评论将我带到了这个stackoverflow.com/questions/22348886享受!
迈克尔

5
Angular的文档说,最好使用控制器$ scope初始化这些值docs.angularjs.org/api/ng/directive/ngInit
Fortuna

3
警告:为此目的使用ng-init可能会导致对$ digest()方法的过多调用,这可能会导致控制台输出看起来像是“达到了10个$ digest()迭代。
DMac毁灭者2015年

235

如果要确保$scope.somethingHere在视图初始化时不会覆盖您somethingHere = somethingHere || options[0].value的值,则需要在ng-init中合并()值,如下所示:

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

22
该解决方案效果很好,并且比所选答案更好。
MJ 2014年

ng-init看起来不应该是这样ng-init =“ somethingHere = somethingHere || options [0]”?
infinitloop

1
如何处理options空虚?就像options数据来自外部来源一样。
空值

1
@suud您只需要在ng-init中检查options && options.length> 0。确实,大多数操作都应该在您的控制器中完成,因此这是可测试的。
本·莱什

@BenLesh如果我想写一些text(string)而不是第一个选项。ng-init="somethingHere= somethingHere || 'Select one' " 我试图这样。但这没用。我的代码有什么问题
codelearner

69

尝试这个:

的HTML

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

Java脚本

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

在这里暴跌

如果您确实要设置将绑定到模型的值,则将ng-options属性更改为

ng-options="option.value as option.name for option in options"

和Javascript

...
$scope.selectedOption = $scope.options[0].value;

另一个Plunker 这里考虑以上。


2
问题是我必须对大量选择框执行此操作。
iConnor 2013年

没明白。你要怎么办
迈克尔·本福德,

我可能需要为50多个选择框手动进行操作
iConnor 2013年

您是说要为每个选择框设置默认值?如果是这样,我想您的问题还不清楚。无论如何,我是否假设您必须将项目加载到每个选择框中?如果是这样,我认为初始化它们的默认值并不重要。
Michael Benford

1
我的问题是选项的索引是从表单上的“提交”返回的。我需要的是您正在调用的option.name,这是从普通的旧rails表单返回的内容。由于您使用ng-repeat来获取正确的标记,因此复选框和单选按钮可以正常工作。如何在表单提交时返回option.name?
pferrel 2014年

40

提到Srivathsa Harish Venkataramana的一个答案track by这确实是一个解决方案!

这是一个与Plunker(下面的链接)一起track byselect中 使用的示例ng-options

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

如果selectedCity是在角范围限定,并且它具有id属性具有相同值的任何id的任何city的上cities列表中,这将是在负载选定的自动。

这是为此的Plunker:http ://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

有关更多详细信息,请参见源文档:https : //code.angularjs.org/1.3.15/docs/api/ng/directive/select


1
谢谢,它对我有所帮助;)
Brahim LAMJAGUAR

1
太棒了!谢谢!
Iurii Golskyi

33

我认为,在包含“ track by”之后,您可以在ng-options中使用它来获取所需的内容,如下所示

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

这种方法比较好,因为当您要用对象列表替换字符串列表时,只需将其更改为

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

当然,这里的某物是具有属性名称和ID的对象。请注意,“ as”不会以这种方式表示ng-options,因为它只会设置值,并且在使用track by时将无法更改它


这对我有用。我认为angular需要一些东西来识别我的范围模型中的对象,等同于选择参考列表。“通过guarantor.code跟踪”成功了!
markbaldy 2014年

22

可接受的答案使用ng-init,但是文件说如果可能避免ng-init。

ngInit的唯一适当用法是为ngRepeat的特殊属性添加别名,如下面的演示所示。除了这种情况,您应该使用控制器而不是ngInit来初始化作用域上的值。

您也可以使用ng-repeat 代替来ng-options进行选择。有了ng-repeat,你可以使用ng-selectedng-repeat特殊属性。即$ index,$ odd,$ even无需任何编码即可完成这项工作。

$first 是ng-repeat的特殊属性之一。

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

----------------------编辑----------------
虽然可以,但我还是希望@ mik-t当您知道要选择的值时,请回答https://stackoverflow.com/a/29564802/454252,使用track-byng-options不使用ng-initng-repeat

仅当您必须选择第一个项目而不知道选择哪个值时,才应使用此答案。例如,我正在使用它进行自动完成,这需要一直选择第一项。


5
此方法可行,但不应该ng-options比更快,更优化地使用ng-repeat
Iso 2015年

@Iso不会不同意您的意见,但是您有该信息的来源吗?
亚当·普洛彻

1
就在文档中:docs.angularjs.org/api/ng/directive/ngOptions “在如何<select>通过select as理解表达式的一部分分配模型方面具有更大的灵活性”,“通过不创建新的作用域来减少内存消耗每个重复的实例”,“通过在a中documentFragment而不是单独创建选项来提高渲染速度”
Iso

16

我的解决方案是使用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上找到它。希望这对其他人有帮助。


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

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

14

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

<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

这对我也适用。简单易懂。
肯特·阿吉拉尔

10

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

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

当我尝试使用值为!=的空字符串(空)的选项时,该选项将替换为angular,但是,当放置类似的选项(具有null值)时,带有该选项的选择就会出现。

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


8

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

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

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


4

这对我有用。

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

3

就我而言,由于默认格式在每种情况下都不同。我在select标记中添加了一个自定义属性。

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

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

 .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()

})

只是从咖啡翻译中翻译过来的,至少它的原理是正确的,如果不是漏洞的话。

这不是最简单的方法,但是要在值变化时完成它


3

回应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>



2

我将在控制器中设置模型。然后,选择将默认为该值。例如: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
  }
});


1

如果您要使用ng-options渲染,则下拉菜单option会默认选择与ng-modal相同的值。考虑示例:

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

因此,默认选择list.key与和具有相同值的 selectedItem选项。


1

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

我通过以下简单的方法实现了此目的:JS代码://翻转这2个以测试所选的默认值或不使用默认的“ Please Select”文本//没有默认值//$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 在此处的回答完成的。


0

如果您有一些东西,而不仅仅是初始化日期部分,则可以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>

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

0

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

$ somethingHere = {名称:“很酷的东西”};

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

并且,如果不起作用,请尝试以下操作:ng-options =“ option.value as option.name for option in option by by option.name”


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.