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

IT技术 javascript angularjs html-select
2021-01-13 00:11:00

我已经搜索过谷歌，但找不到任何关于此的内容。

我有这个代码。

<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>
6个回答

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

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>
我在解决这个问题时也遇到了问题，@maurits 的评论让我找到了这个stackoverflow.com/questions/22348886享受吧！
2021-03-15 00:11:00
警告：为此目的使用 ng-init 会导致对 $digest() 方法的过度调用，这可能会导致您的控制台输出看起来全是红色和丑陋的，并带有诸如“10 $digest() 迭代达到。中止！”之类的消息。
2021-04-03 00:11:00
Angular 的文档说更好地使用控制器 $scope 来初始化这些类型的值docs.angularjs.org/api/ng/directive/ngInit
2021-04-04 00:11:00
这个答案没有错，但在我的具体情况下，ng-init 对我来说失败了。问题是我使用的值在 ng-init 运行时还不可用：我通过 ajax 调用获得了该值，此时 ng-init 已经完成。最后我在那个值上使用了一个观察者，在那个函数中我做了和我在 ng-init 中做的一样的事情。那行得通。
2021-04-09 00:11:00
我在这项工作中遇到了问题，因为我正在使用“跟踪”，删除它可以解决问题，以防万一对某人有所帮助：D
2021-04-10 00:11:00

如果您想确保您的$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>
@BenLesh 如果我想写一些文本（字符串）而不是第一个选项。ng-init="somethingHere= somethingHere || 'Select one' " 我试过这样。但它没有用。我的代码有什么问题
2021-03-21 00:11:00
此解决方案运行良好，比所选答案更好。
2021-03-22 00:11:00
@suud 您只需要在 ng-init 中检查 options && options.length > 0 即可。真的，大部分应该在你的控制器中完成，所以它是可测试的。
2021-03-28 00:11:00
options空虚怎么处理？就像options数据来自外部来源的情况一样。
2021-03-31 00:11:00
ng-init 不应该像这样 ng-init="somethingHere = somethingHere || options[0]" ??
2021-04-02 00:11:00

试试这个：

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];
}

普朗克在这里。

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

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

和 Javascript

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

考虑到上述情况，这里的另一个Plunker 。

你的意思是为每个选择框设置默认值？如果是这样，我想这在您的问题中不清楚。无论如何，我假设您必须将项目加载到每个选择框中是否正确？如果是这样，我认为初始化它们的默认值不会有什么大不了的。
2021-03-14 00:11:00
没听懂。你必须做什么？
2021-03-15 00:11:00
对于50 多个选择框，我必须手动执行此操作
2021-03-16 00:11:00
我的问题是选项的索引是从表单上的“提交”返回的。我需要的是你所说的 option.name，它是从一个普通的旧 Rails 表单返回的。复选框和单选按钮工作正常，因为您使用 ng-repeat 来获得正确的标记。如何在表单提交时返回 option.name ？
2021-03-17 00:11:00
问题是我必须为大量选择框执行此操作。
2021-04-09 00:11:00

Srivathsa Harish Venkataramana 只提到了一个答案，track by这确实是一个解决方案！

这是一个示例以及如何track by在select 中 使用的Plunker（下面的链接）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

谢谢它帮助了我;)
2021-03-13 00:11:00
惊人的！谢谢！
2021-03-28 00:11:00

我认为，在包含 '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>

当然，somethingHere 是一个具有属性名称和 ID 的对象。请注意，'as' 不用于表示 ng-options 的这种方式，因为它只会设置值，并且在使用 track by 时您将无法更改它

这对我有用。我认为 angular 需要一些东西来识别我的范围模型中的对象，相当于选择参考列表。“通过 guarantor.code 跟踪”成功了！
2021-03-12 00:11:00
其它你可能感兴趣的问题
上一篇重复字符串 - Javascript 下一篇如何使用 JavaScript 在 div 中加载 HTML 页面？