Javascript 清空下拉列表中的第一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14706986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Empty first element in dropdown list
提问by MariusNV
I am quite a beginner with AngularJS and currently I am working on a web application in Django where I use AngularJS for the frontend part i can say. My problem is that the dropdown list which is populated with objects from a scope always start with a blank element (if i select one from the list, the issue is gone). This create problems because if the user doesn't select anything the POST request normally it will not work anymore. I would like to know how to have something like a preselected value or something similar. Here's part of my code:
我是 AngularJS 的初学者，目前我正在 Django 中开发一个 Web 应用程序，在那里我使用 AngularJS 作为前端部分，我可以说。我的问题是，用范围内的对象填充的下拉列表总是以空白元素开头（如果我从列表中选择一个，问题就消失了）。这会产生问题，因为如果用户没有选择任何内容，POST 请求通常将不再起作用。我想知道如何拥有诸如预选值之类的东西或类似的东西。这是我的代码的一部分：
Select tag:
选择标签：
<select id="sel" class="input-block-level" ng-model="list_category">
<option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
<option value="Other">Other</option>
</select>
$scope.list_categories:
$scope.list_categories:
var listcategoryPromise = ListCategory.get();
listcategoryPromise.then(function(response) {
$scope.list_categories = {
meta : response.data.meta,
data : response.data.objects
};
});
回答by bmleite
Use the directive ng-optionsand remove the valuefrom the 'Other' option, like this:
使用指令ng-options并value从“其他”选项中删除，如下所示：
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">
<option value="">Other</option>
</select>
This ensures that if list_categoryis empty (no entry selected), the 'Other' option is selected (by default).
这确保如果list_category为空（未选择条目），则选择“其他”选项（默认情况下）。
jsFiddle: http://jsfiddle.net/bmleite/gkJve/
jsFiddle：http: //jsfiddle.net/bmleite/gkJve/
回答by Ajay Beniwal
Find the below working example below you should avoid ng-repeat with options so please see below sample code with
在下面找到下面的工作示例，您应该避免使用 ng-repeat 选项，因此请参阅下面的示例代码
<body ng-controller="testcontroller">
<select ng-model="item" ng-options="item.ID as item.Title for item in items">
</select>
<span>{{item}}</span>
</body>
App.controller('testcontroller', function ($scope) {
$scope.item = '000001';
$scope.items = [
{ ID: '000001', Title: 'Chicago' },
{ ID: '000002', Title: 'New York' },
{ ID: '000003', Title: 'Washington' }
];
});
回答by maxdec
You can use a specific syntax for <select>tags with Angularjs.
您可以对<select>Angularjs 的标签使用特定的语法。
Inspired from the documentation page:
灵感来自文档页面：
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
<option value="Other">Other</option>
</select>
回答by Chris
Here's some code directly from the AngularJs.org website about select lists:
这是直接来自 AngularJs.org 网站的一些关于选择列表的代码：
<select ng-model="color" ng-options="c.name for c in colors"></select>
First, as you can see, you don't need to use the ng-repeat to build your options list. Angular is going to basically let you do a foreachloop on a collection to build your option list. Second, you have the ng-model which is on the select, but isn't the same as your collections name. This is going to be your item which is actually collected at post time .
首先，如您所见，您不需要使用 ng-repeat 来构建您的选项列表。Angular 基本上会让你foreach在一个集合上做一个循环来构建你的选项列表。其次，您在选择中拥有 ng-model，但与您的集合名称不同。这将是您在邮寄时实际收集的物品。
function MyCntrl($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
$scope.color = $scope.colors[2]; // red
}
Okay, and here's the javascript controller code. $scope.colorsis the collection and $scope.coloris the model property which has been assigned to the select list in the html. As you can see from this example the model property is being given a default starting value of the third option in the array. For you, this can be set from the http.get you're using for loading up your page initally.
好的，这是 javascript 控制器代码。$scope.colors是集合，$scope.color是已分配给 html 中的选择列表的模型属性。从这个例子中可以看出，模型属性被赋予了数组中第三个选项的默认起始值。对您来说，这可以从您最初用于加载页面的 http.get 中设置。
Now when you're doing the foreach, you're basically grabbing the 'name' value from the collection and you're saying 'show this value' in the dropdown and use this value on the post. By having that inital model property set, you should be able to avoid having an empty option field in your drop down list.
现在，当您执行 foreach 时，您基本上是从集合中获取“名称”值，然后在下拉列表中说“显示此值”并在帖子中使用此值。通过设置初始模型属性，您应该能够避免在下拉列表中出现空选项字段。
Reference: AngularJS Select
参考：AngularJS 选择
回答by burnaDLX
in my opinion this answeris cleaner:
在我看来，这个答案更清晰：
$scope.form = {type : $scope.typeOptions[0].value};
回答by Aamir
The Blank empty option on top of drop down will appear if you have set ng-modelwith some value which is not contained in the list options created after the ng-Repeat.
Now if you consider the original post and remove the ng-modelor set some valid value in ng-model, it will work fine
or you can set selected first item as
如果您设置ng-model了一些值，该值不包含在ng-Repeat. 现在，如果您考虑原始帖子并删除ng-model或 在 中设置一些有效值ng-model，它将正常工作，或者您可以将选定的第一项设置为
$scope.list_category = $scope.list_categories.data[0].id;
回答by Nikhil Deshpande
try this:
尝试这个：
<option style="display: none" value=""></option>
hope it helps someone
希望它可以帮助某人
