AngularJS select组件如何默认选中状态

以你之姓@ 2022-06-06 06:44 237阅读 0赞

每日问题总结打卡

AngularJS是一个JavaScript框架，支持很多特性

*  AngularJS 把应用程序数据绑定到 HTML 元素。
 *  AngularJS 可以克隆和重复 HTML 元素。
 *  AngularJS 可以隐藏和显示 HTML 元素。
 *  AngularJS 可以在 HTML 元素”背后”添加代码。
 *  AngularJS 支持输入验证。

可以下载到本地引入或者使用CDN获取`<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>`

常用的**AngularJS指令**有

*  ng-app：声明应用程序的所有者
 *  ng-model：把输入域的值绑定到应用程序变量
 *  ng-bind：把某个变量绑定到innerHTML

**AngularJS表达式**写在大括号内：`{ { expression }}` 可以包含文字，运算符和变量

AngularJS应用：

*  module：定义AngularJS应用
 *  Controller：控制应用
 *  ng-app：定义引用
 *  ng-controller：定义控制器

<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: { { firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

模块定义应用

var app = angular.module('myApp', []);

控制器定义应用

app.controller('myCtrl', function($scope) { 
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });

回到前面的问题，如何使得select的option保持默认选中状态。

不使用Angular的时候我们可以这样写

使用Angular写select的时候可以有很多种写法

可以使用ng-options迭代列表创建下拉选项

<div ng-app="myApp" ng-controller="myCtrl">
        <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
        </select>
    </div>
    <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); </script>

也可以使用ng-repeat创建下拉列表

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

这里出现的一个问题是这样出来的效果是第一个下拉框是空的，之后才是正常的选项。

解决这个问题可以有两种方法，第一种是添加一个value为空的选项作为第一项

这种虽然能解决问题，但是当我要提交值的时候不能提交空吧，所以选择第二种，为select设置初始值。

可以在标签中使用`ng-init`或者在脚本中使用`$scope.xxx='value'`来实现

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectPerson=persons['caohui']" ng-model="selectPerson" ng-options="x for (x,y) in persons"> </select> <p> 年龄:{ { selectPerson.age}} </p> <p> 性别:{ { selectPerson.sex}} </p> <p> 月薪:{ { selectPerson.salary}} </p> </div>