angularjs下拉列表 select

柔情只为你懂 2022-07-14 22:52 181阅读 0赞

<!DOCTYPE html>
    <html ng-app="app">
    <head>
    	<meta charset="utf-8">
    	<title>ee</title>
    	<script type="text/javascript" src="angular.min.js"></script>
    </head>
    <body>
    
    <form name="temp_form" ng-controller="c16">
    	<div>
    		学制：
    		<select ng-model="a" ng-options="v.id as v.name for v in a_data" ng-change="a_change(a)">
    			<option value="">--请选择--</option>
    		</select>
    		<span> {
       {a_show}} </span>
    	</div>
    	<div>
    		班级：
    		<select ng-model="b" ng-options="v.id as v.name group by v.group for v in b_data" ng-change="b_change(b)">
    			<option value="">--请选择--</option>
    		</select>
    		<span> {
       {b_show}} </span>
    	</div>
    </form>
    
    <script type="text/javascript">
    	var app = angular.module("app", []);
    	app.controller("c16", ['$scope', function($scope) {
    		$scope.a_data = [
    			{id :"1001", name :'小学'},
    			{id :"1002", name :'初中'},
    			{id :"1003", name :'高中'},
    		];
    		$scope.a_show = '';
    		$scope.b_show = '';
    		$scope.a_change = function(a) {
    			$scope.a_show = "您的选择是：" + a;
    		}
    		$scope.b_data = [
    			{id :"2001", name :'小学', group:"一年级"},
    			{id :"2002", name :'小学', group:"一年级"},
    			{id :"2003", name :'小学', group:"一年级"},
    			{id :"2004", name :'初中', group:"二年级"},
    			{id :"2005", name :'初中', group:"二年级"},
    			{id :"2006", name :'高中'},
    			{id :"2007", name :'初中', group:"三年级"},
    		];
    		$scope.b_change = function(b) {
    			$scope.b_show = "您的选择是：" + b;
    		}
    	}])
    </script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 js渲染select下拉列表数据

HTML（使用了layui） <div class="layui-form-item" style="margin-top: 15px" > ...

谁借莪１个温暖的怀抱￠/ 2024年04月18日 08:10/ 0 赞/ 31 阅读

相关 jquery操作select 下拉列表

(注意：此处用的是jquery1.4.1) var index = $('\ddlBrand option:selected').attr('index');//获取选中项的

港控/mmm°/ 2022年09月29日 15:56/ 0 赞/ 173 阅读

相关 s标签s:select下拉列表的使用

现象：jsp页面中s:select标签的使用原因：在struts2框架开发中，有时候jsp页面需要用s标签来写，因为s标签能自动读取值栈中相匹配的字段信息。其中s:

曾经终败给现在/ 2022年09月29日 14:55/ 0 赞/ 176 阅读

相关深究AngularJS——下拉框（selected）

即使写一个下拉框，也会有多种情况，我这里讲讲我遇到过的。 1. 将值写死的情况： <body> <div ng-app="myApp" ng-contr

ゞ浴缸里的玫瑰/ 2022年07月24日 04:21/ 0 赞/ 197 阅读

相关 angularjs下拉列表 select

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8">

柔情只为你懂/ 2022年07月14日 22:52/ 0 赞/ 182 阅读

相关 ionic3 ion-select下拉列表

HTML： <ion-list > <ion-item> <ion-label stacked>问题类型</ion-label>

谁践踏了优雅/ 2022年05月31日 03:12/ 0 赞/ 341 阅读

相关 HTML下拉列表select的应用场景

最新更新时间：2019年1月30日17:50:17 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：下拉列表应用场景概述

谁践踏了优雅/ 2022年03月21日 04:57/ 0 赞/ 297 阅读

相关 HTML中的下拉列表 select

HTML中的下拉列表： Html代码 ![收藏代码][icon_star.png] 1. <select> 2. <option value ="1

Dear 丶/ 2021年09月25日 16:08/ 0 赞/ 471 阅读

相关 jquery 实现的select下拉列表

效果如下: ![20200602153152578.png][] html <div class="select_item"> <

浅浅的花香味﹌/ 2021年07月26日 19:05/ 0 赞/ 411 阅读

相关 HTML select 下拉列表

select 下拉列表由 `< select>` 和 `< option>` 标签配合使用生成。下拉列表控件提供可供选择的项，可以选中其中的一项或者多项。

小灰灰/ 2020年05月16日 17:43/ 0 赞/ 845 阅读