如何在Angular.js复选框中设置默认选项?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (147)

尝试这段代码。

<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>
提问于
用户回答回答于

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

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

在我的例子中,我需要插入一个初始值,但只需要告诉用户选择一个选项,因此,我确实喜欢下面的代码:

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

当我尝试使用空字符串(NULL)的值!=时,该选项被角替换,但是,当放置类似于空字符串(NULL值)的选项时,这个选项将被SELECT APEAR替换。

用户回答回答于

根据有多少选项,可以将值放入数组中,然后自动填充如下选项

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

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

<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>
用户回答回答于

我的解决方案是使用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中的所有值,这就是为什么我有一个空白值的原因。

用户回答回答于

$first是ng重复的特殊属性之一

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

虽然这是可行的,但当您知道要选择什么值时,https://stackoverflow.com/a/29564802/454252,它使用track-byng-options不使用ng-initng-repeat...

只有当您必须选择第一项时才使用此答案,而不知道要选择的值。例如,我正在使用这个自动完成,这需要选择第一个项目的所有时间。

用户回答回答于

只有一个Srivathsa Harish Venkataramana的答复提过track by这确实是一个解决办法!

下面是一个示例,以及如何使用的Plunker(链接)track by选择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任何citycities列表,它将在装载时自动选择。

以下是这方面的Plunker:http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

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

用户回答回答于

我认为,在包含了“TrackBy”之后,您可以在ng选项中使用它来获得您想要的东西,如下所示

 <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-选项的,因为它只会设置值,并且在使用跟踪时无法更改。

用户回答回答于

试试这个:

HTML

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

JavaScript

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

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

Plunker这儿...

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

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

和Javascript

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

另一个PlunkerLink

用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券