Question

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

Answer 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/

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

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

Answer 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中的选择列表的模型属性。从这个例子中可以看出，model属性被赋予了数组中第三个选项的默认起始值。对于您，可以从您用于初始加载页面的http.get设置。

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

参考：AngularJS Select

Answer 5

在我看来this answer更清洁：

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

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

Answer 6

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

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

Answer 7

试试这个：

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

希望它可以帮助某人

在下拉列表中清空第一个元素

7 个答案: