在下拉列表为空的第一个元素 [英] Empty first element in dropdown list

问题描述

我与AngularJS相当初学者，目前我的工作在Django的web应用程序，我用AngularJS的前端部分，我可以说。我的问题是它填充了从范围的对象下拉列表中总是以一个空白元素开始（如果我从列表中选择一个，问题消失）。这产生问题，因为如果用户不选择任何内容的POST请求通常它不会工作了。我想知道如何有一些像preselected值或类似的东西。这里是我的code的一部分：

选择标记：

 ＆LT;选择一个id =选择类=输入块级NG模型=list_category＆GT;
            ＆LT;选项NG重复=OBJ在list_categories.dataVALUE ={{obj.id}}＆GT; {{obj.name}}＆LT; /选项＆GT;
            ＆LT;期权价值=其他＆gt;其他＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
 

$ scope.list_categories：

  VAR listcategoryPromise = ListCategory.get（）;
    listcategoryPromise.then（功能（响应）{
        $ scope.list_categories = {
            元：response.data.meta，
            数据：response.data.objects
        };
    }）;
 

解决方案

使用指令 NG-选项和删除值从其他选项，如：

 ＆LT;选择一个id =选择类=输入块级NG模型=list_categoryNG选项=obj.id作为obj.name的OBJ在list_categories.data＆GT;
    ＆LT;期权价值=＆gt;其他＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

这可以确保如果 list_category 是空的（没有选择项），其他选项被选中（默认情况下）。

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

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:

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:

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

解决方案

Use the directive ng-options and remove the value from the 'Other' option, like this:

<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_category is empty (no entry selected), the 'Other' option is selected (by default).

jsFiddle: http://jsfiddle.net/bmleite/gkJve/

这篇关于在下拉列表为空的第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！