下拉列表中的第一个空元素

我是AngularJS的初学者，目前我正在Django的Web应用程序中使用AngularJS作为前端部分，我可以说。我的问题是，用范围内的对象填充的下拉列表总是以空白元素开头（如果我从列表中选择一个，问题就消失了）。这会产生问题，因为如果用户通常不选择任何POST请求，它将不再工作。我想知道如何获得预选值或类似的东西。这里是我的代码部分：下拉列表中的第一个空元素

选择标签：

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

var listcategoryPromise = ListCategory.get(); 
    listcategoryPromise.then(function(response) { 
     $scope.list_categories = { 
      meta : response.data.meta, 
      data : response.data.objects 
     }; 
    });

来源

2013-02-05 MariusNV

可能重复的[为什么angularjs在select中包含空选项]（http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-选择） –

使用指令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>

这确保了如果list_category是空的（没有选择的条目），则'其他'选项被选中（默认）。

的jsfiddle：http://jsfiddle.net/bmleite/gkJve/

来源

2013-02-05 12:35:20 bmleite

我试过类似的东西，我遇到了同样的问题。对我来说，value =“other”非常重要，因为我使用ng-show弹出文本字段，然后选择： – MariusNV

这不是问题。将'ng-show'改为'ng-show =“！list_category”'（仅当没有选择'list_category'时才显示输入）fiddle：http://jsfiddle.net/bmleite/gkJve/2/ – bmleite

找到下面的工作下面的例子你应该避免NG重复的选项所以请参阅下面的示例代码与

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

来源

2013-02-05 12:34:26

您可以使用特定的语法<select>标签与Angularjs。

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

来源

2013-02-05 12:34:43 maxdec

下面直接是一些代码从AngularJs.org网站关于选择列表：

<select ng-model="color" ng-options="c.name for c in colors"></select>

首先，你可以看到，你不需要使用ng-repeat构建您的选项列表。 Angular基本上会让你在集合上做一个foreach循环来构建你的选项列表。其次，你有选择上的ng模型，但不同于你的集合名称。这将是你的项目，这是实际收集后的时间。

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 
}

好的，这里是javascript控制器代码。 $scope.colors是集合，$scope.color是已分配给html中的选择列表的模型属性。正如你可以从这个例子看到的，model属性被赋予了数组中第三个选项的默认起始值。对于你来说，这可以从你使用的http.get来初始化加载页面来设置。

现在，当你正在做foreach时，你基本上从集合中获取'name'值，并且在下拉列表中显示'显示此值'，并在帖子中使用此值。通过设置该初始模型属性，您应该能够避免在下拉列表中出现空的选项字段。

参考：AngularJS Select

来源

2013-02-05 12:35:06 Chris

在我看来 this answer

是清洁：

$scope.form = {type : $scope.typeOptions[0].value};

http://jsfiddle.net/MTfRD/2010/

来源

2015-08-05 11:10:55 burnaDLX

在下降的顶部的空白空的选项，如果你已经设置ng-model一些下来会出现值不包含在ng-Repeat之后创建的列表选项中。现在，如果你认为原来的职位，并在ng-model删除ng-model或设置一些有效的值，它会正常工作或者您可以设置选择的第一项作为

$scope.list_category = $scope.list_categories.data[0].id;

来源

2016-01-18 06:05:07 Aamir

-1

试试这个：

<option style="display: none" value=""></option>

希望它可以帮助别人

来源

2016-07-08 09:59:36

请编辑with更多信息。仅限代码和“尝试这个”的答案是不鼓励的，因为它们不包含可搜索的内容，也不解释为什么有人应该“尝试这个”。我们在这里努力成为知识的资源。 – abarisone

不要在代码中编写内联样式，这是一个糟糕的做法，除非您通过JS动态添加内联样式，即使如此，这是一个不好的做法。只需添加就足够了。 – TGarrett

下拉列表中的第一个空元素

回答

相关问题