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

【问题标题】：Empty first element in dropdown list空下拉列表中的第一个元素
【发布时间】：2013-02-05 11:57:03
【问题描述】：

我是 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
        };
    });

【问题讨论】：

Why does angularjs include an empty option in select 的可能重复项

标签： javascript angularjs

【解决方案1】：

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

【讨论】：

我之前尝试过类似的方法，但也遇到了同样的问题。对我来说 value="other" 很重要，因为我使用 ng-show 弹出一个文本字段然后被选中：
这不是问题。将ng-show 更改为ng-show="!list_category"（仅在未选择list_category 时显示输入）小提琴：jsfiddle.net/bmleite/gkJve/2
多选呢？在这种情况下我不能应用它。

【解决方案2】：

在下面找到下面的工作示例，您应该避免使用选项 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' }
    ];
});

【讨论】：

【解决方案3】：

您可以在 Angularjs 中为 <select> 标签使用特定语法。

灵感来自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>

【讨论】：

【解决方案4】：

这里有一些直接来自 AngularJs.org 网站的关于选择列表的代码：

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

首先，如您所见，您不需要使用 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
}

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

现在，当您执行 foreach 时，您基本上是从集合中获取“名称”值，并在下拉列表中说“显示此值”并在帖子中使用此值。通过设置初始模型属性，您应该能够避免下拉列表中出现空选项字段。

参考：AngularJS Select

【讨论】：

【解决方案5】：

在我看来this answer 更干净：

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

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

【讨论】：

【解决方案6】：

如果您将ng-model 设置为ng-Repeat 之后创建的列表选项中未包含的值，则会出现下拉列表顶部的空白选项。现在，如果您考虑原始帖子并删除ng-model 或在ng-model 中设置一些有效值，它将正常工作或者您可以将选定的第一项设置为

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

【讨论】：