我已经搜索了谷歌,在这个上面什么也找不到。

我有这个代码。

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

当前回答

在我的情况下,我需要插入一个初始值,只告诉用户选择一个选项,所以,我喜欢下面的代码:

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

当我尝试一个空字符串(null)的值!=的选项时,该选项被angular取代,但是,当放置一个这样的选项(空值)时,选择出现这个选项。

抱歉我的英语不好,我希望我能在这方面有所帮助。

其他回答

如果你想确保你的$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>

对于Ben Lesh的回答,应该有这样一条线

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

而不是

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

也就是说,

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

如果你有一些东西,而不仅仅是init日期部分,你可以使用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>

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

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

我需要默认的“请选择”是不可选择的。我还需要能够有条件地设置默认选择选项。

我通过以下简单的方法做到了这一点: JS代码: //翻转这两个按钮来测试所选的默认值或默认的“Please Select”文本 //$scope.defaultOption = 0; $scope.defaultOption = {key: '3', value: '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的回答完成的。