Angular--ng-options

Angular--ng-options

    • 用途
    • 下拉菜单组成
    • 适用情形一,普通数组
    • 适用情形二(数组嵌套对象)
    • 适用情形三(普通对象)

学习资源推荐: https://blog.csdn.net/qq_42813491/article/details/90213353

用途

ng-options属性特别的好用,可以智能的从控制器中取值当前的值做选项,用在下拉菜单里边

下拉菜单组成

  • 组成就两个东西,一个是显示的东西,叫label,一个是要提交的值,叫value
  • 以打折为例,呈递到界面的选项是五折六折七折,真正提交的是0.5,0.6,0.7
	<select>
		<option value="0.5">五折option>
		<option value="0.6">六折option>
		<option value="0.7">七折option>
	select>

在这里插入图片描述

适用情形一,普通数组


<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Angular--ng-optionstitle>
	<script type="text/javascript" src="js/lib/angular/angular.min.js">script>
head>
<body>
	<div ng-controller="MainCtrl as mainctrl">
	<select ng-model="mainctrl.value" ng-options="item for item in mainctrl.arr" >select>
		{
    {mainctrl.value}}
	div>
	<script type="text/javascript">
		var app = angular.module("app",[]);
		app.controller("MainCtrl",[function(){
      

			this.value="东";//给一个默认值,没有也可以
			this.arr=["东","西","南","北"];
		}]);
	script>
body>
html>

效果图
在这里插入图片描述
在这里插入图片描述

适用情形二(数组嵌套对象)


<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Angular--ng-optionstitle>
	<script type="text/javascript" src="js/lib/angular/angular.min.js">script>
head>
<body>
	<div ng-controller="MainCtrl as mainctrl">

		<select ng-model="mainctrl.value" ng-options="item.sid as item.name for item in mainctrl.arr" >
			
		select>
		{
    {mainctrl.value}}
	div>
	<script type="text/javascript">
		var app = angular.module("app",[]);
		app.controller("MainCtrl",[function(){
      

			this.value="001";//给一个默认值,没有也可以
			this.arr = [
				{
      "sid" : "001" , "name" : "冷月心"},
				{
      "sid" : "002" , "name" : "莫山山"},
				{
      "sid" : "003" , "name" : "叶红鱼"}
			];
		}]);
	script>
body>
html>

Angular--ng-options_第1张图片

  • 解释 ng-options=“item.sid as item.name for item in mainctrl.arr”
  • item.sid 指定当前项的value值,也就是要提交的值
  • item.name指定当前项的label值,也就是要消失在下拉框的值
  • item 遍历项
  • mainctrl.arr 要遍历的数组

适用情形三(普通对象)


<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Angular--ng-optionstitle>
	<script type="text/javascript" src="js/lib/angular/angular.min.js">script>
head>
<body>
	<div ng-controller="MainCtrl as mainctrl">

		<select ng-model="mainctrl.value" ng-options="value as key for (key,value) in mainctrl.arr" >
		select>
		{
    {mainctrl.value}}
	div>
	<script type="text/javascript">
		var app = angular.module("app",[]);
		app.controller("MainCtrl",[function(){
      
			this.value="粤";//给一个默认值,没有也可以
			this.arr = {
      
				"广东" : "粤",
				"北京" : "京",
				"上海" : "沪",
				"湖北" : "鄂",
				"河南" : "豫"
			};
		}]);
	script>
body>
html>

在这里插入图片描述

  • value as key for (key,value) in mainctrl.arr
  • value 提交的值
  • key 显示的值

你可能感兴趣的:(前端--angular,angular,ng-options)