Angularjs中ng-select和ng-options用法【select联动数据】

Love The Way You Lie 2022-06-09 13:27 187阅读 0赞

> **1、使用前景**  
> 最近在使用angualr项目中遇到select联动数据，尝试了很多次都失败，终于在查找了很多资料以后解决了问题。

--------------------

> **2、介绍ng-select**
> 
> ng-select用来将数据同HTML的标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用，构建精细且表现良好的动态表单。
> 
> ng-options的值可以是一个内涵表达式（comprehension  
> expression），其实这只是一种有趣的说法，简单来说就是它可以接收一个数组或者对象，并对她们进行循环，将内部的内容提供给select标签内部的选项。它可以是一下两种形式。
> 
> **1、数组作为数据源**
> 
> 用数组中的值做标签。
> 
> 用数组中的值作为选中的标签。
> 
> 用数组中的值做标签组。
> 
> 用数组中的值作为选中的标签组。
> 
> **2、对象作为数据源**
> 
> 用对象的键-值（key-value）做标签。
> 
> 用对象的键-值作为选中的标签。
> 
> 用对象的键-值作为标签组。
> 
> 用对象的键-值作为选中的标签组。

--------------------

> **3、实例**  
> html代码

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
    <head>
        <title>select</title>
        <script src="JS/angular.min.js"></script>
        <script>
            var app = angular.module('app', []);
            app.controller('selectController', function ($scope) {
         
                $scope.mycity = '北京';
                $scope.Cities = [{ id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广州' }];
            });
        </script>
    </head>
    <body>
        <div ng-controller="selectController">
            <select ng-model="mycity" ng-options="city for city in Cities"></select>
        </div>
    </body>
    </html>

**结果如下：**

![这里写图片描述][012033399212347.png]

> 你会发现，上面的option中的text都是对象，这也很容易理解，因为cities数组的每一项都是一个对象，绑定的时候将以对象直接绑定上。那么我们如何只让它显示name属性呢？

**直接点出属性即可。再查看下dom数。**

![这里写图片描述][012037043756151.png]

**值已经显示出来，但是并不是太完美，因为第一项默认选中的竟然没有值，那么接下来我们指定默认值。**

$scope.mycity = '北京';

加上这句代码，并不能解决问题，我们仍需修改ng-options

**我们再查看下dom**

![这里写图片描述][012039511715927.png]

> 这样就能解决这个问题啦~

[012033399212347.png]: /images/20220609/dbe004f172614315abc90e3adbbd1de6.png
[012037043756151.png]: /images/20220609/2241347adb4c4050b96cb486712aa0d1.png
[012039511715927.png]: /images/20220609/5af8c27793594d10a44ffb6f784838da.png