AngularJS入门（9）---下拉框

下拉框

AngularJS 可以使用数组或对象创建一个下拉列表选项

1. 使用 ng-option 创建下拉框

列表项通过对象和数组循环输出，如下实例:

注意select标签要写再div里！！！！！

2. 使用 ng-repeat 创建下拉框

        
            {{x}}
        
    

    

注意不要忘记option标签！！！！！

3. ng-repeat 和 ng-options的比较

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。
如下实例：
假设我们使用以下对象:

$scope.names = [
    {name : "张森玮", address : "山西长治"},
    {name : "谭淇蔚", address : "山西运城"},
    {name : "梁欢欢", address : "山西运城"}
];

ng-repeat 有局限性，选择的值是一个字符串，如下:

        
            {{x.name}}
        
        
他们三个饭做的最好吃的是：{{selectName}}
    
    

• 注意select标签里只能放下拉框里的东西，如<$h1$>标签就不能放在select里；
• ng-repeat加载的是字符串，如果这个字符串对应的对象有多个属性时（name、address）就不能全部加载出来（value只能有一个）

ng-options 选择的是一个对象：

 

        
        
        
他们三个饭做的最好吃的是：{{selectName.name}}
        
他来自：{{selectName.address}}

    
    

注意ng-options的条件“x.name for x in names”,因为取到的是对象，所以可以.name.
当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活

4. 数据源为对象

前面的例子用数组作为数据源，数据对象也可以作为数据源，如下：

$scope.names = {
    name01 : "张森玮",
    name02 : "谭淇蔚",
    name03 : "梁欢欢"
};

ng-options 使用对象有很大的不同
如下所示，使用对象作为数据源, x 为键(key), y 为值(value):：

        

        做饭最好吃的是： 
{{selectName}}
        
    

上面的例子选择的值是 key-value 对中的 value，
value 在 key-value 对中也可以是个对象：

 

        

        
你选择的是：{{selectName.name}}

        
他来自：{{selectName.address}}

        
他喜欢的颜色是：{{selectName.color}}

    
    

也可以不使用 key-value 对中的 key , 直接使用对象的属性：

 

        

        
你选择的是：{{selectName.name}}

        
他来自：{{selectName.address}}

        
他喜欢的颜色是：{{selectName.color}}