angular关于select的留白问题

select留白问题

出现这个问题的原因主要是指令使用错误；使用select我们要放到其中的选项一般就两种：第一种是直接写好在select下，第二种是通过循环对象或数组绑定到select中。

　　　　　　　　第一种直接option：

 

　　　　　　　　第二种通过循环：

 

第一种情况出现留白的解决办法：

这种留白比较好解决有两种方案：第一种：像我上面贴的图片一样，给一个value为空的option，内容给请选择或全部之类的；第二种：如果不能额外加一个选项，则将ng-model给一个默认值

 

第二种出现留白的解决方法：
第二种循环绑定出现留白要说明的就有点多，要从angular的select指令说起，select指令中的属性包括：

<select
ng-model=""	数据绑定
[name=""]
[required=""]
[ng-required=""]	属性值为true时，对select添加required验证，为false时不验证。
[ng-options=""]>	指定数据源，生成option选项。
</select>

 

这里主要是说明ng-options,ng-options针对不同的数据源有不同的用法，主要是对像和数组

数组：

label for value in array 

select as label for value in array

label group by group for value in array

select as label group by group for value in array

select as label group by group for value in array track by trackexpr

对象：

label for ( key,value ) in object

select as label for ( key,value ) in object

label group by group for ( key,value ) in object

select as label group by group for ( key,value ) in object

 

说明：

array / object： 数据源的类型，有数组和对象两种，我个人用数组较多

value：在循环迭代过程中，要引用的对象的属性或数组的项

key：在循环迭代过程中要引用的对象属性值，数据源为数组是没有这个的

label：选项显示的标签，即option中给用户看到的内容

select：将结果绑定到ng-model中，如果没有指定，则默认绑定value

group：group by的条件，表示按某条件进行分组

trackexpr：用于唯一确定数组中的迭代项的表达式

 

 

g-options与ng-repeat自动生成option选项的区别：

　ng-options生成的option选项选中后，绑定到ng-model的值可以是对象。ng-repeat绑定到ng-model的值只能是字符串。

 

其实总结起来就一句话，要不留白就给一个空值选项，或给定一个默认值