angularjs速成学习个人理解_8form中的下拉框

最新推荐文章于 2022-12-26 14:42:25 发布

dl0246

最新推荐文章于 2022-12-26 14:42:25 发布

阅读量303

点赞数

分类专栏： Web前端技术文章标签： angularjs angular

本文链接：https://blog.csdn.net/dl0246/article/details/78388876

版权

Web前端技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在开发中下拉框往往会做成组件化。angular可以灵活的给下拉框赋值或选取值、选取对象。



方式一：直接在option上循环
给定数据如下：数据是一个数组。
				$scope.cars = [
					{brand:"BMW",name:"宝马"},
					{brand:"Benz",name:"奔驰"},
					{brand:"Audi",name:"奥迪"}
				];
通过ng-model获取选择的值，如下：			<select ng-model="selectedCar">
				<option ng-repeat="car in cars" value="{{car.brand}}">{{car.name}}</option>
			</select>
			<p>Selected Car: {{selectedCar}}</p>


运行结果比较简单。
<select ng-model="selectedCar" class="ng-pristine ng-valid ng-empty ng-touched">
    <option value="? undefined:undefined ?"></option>
    <!-- ngRepeat: car in cars -->
    <option ng-repeat="car in cars" value="BMW" class="ng-binding ng-scope">宝马</option>
    <!-- end ngRepeat: car in cars -->
    <option ng-repeat="car in cars" value="Benz" class="ng-binding ng-scope">奔驰</option>
    <!-- end ngRepeat: car in cars -->
    <option ng-repeat="car in cars" value="Audi" class="ng-binding ng-scope">奥迪</option>
    <!-- end ngRepeat: car in cars -->
</select>
方式二：for 。。。in语法。可以获取更多的对象信息。
首先封装数据如下：
				$scope.cars = [
					{brand:"BMW",name:"宝马",color:"Red"},
					{brand:"Benz",name:"奔驰",color:"Green"},
					{brand:"Audi",name:"奥迪",color:"Blue"}
				];

通过在select标签中加入ng-option语法实现。ng-options="car.brand for car in cars">。car.brand作为value值标签如下：
			<select ng-model="selectedCar" ng-options="car.brand for car in cars"></select>
			<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>

生成的html代码：.
方式三：x from (x, y)  in 语法。
选择的值将会是一个对象。数据如下：
				$scope.cars = {
					BMW: {name:"宝马",color:"红色"},
					Benz: {name:"奔驰",color:"蓝色"},
					Audi: {name:"奥迪",color:"绿色"}
				};


key是BMW\Benz\Audi.    value是对应的对象。

			<select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select>
			<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>



完整代码如下：
<!DOCTYPE html>

<html ng-app="myApp">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Select - AngularJS Test</title>
		<style type="text/css">
			.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
		</style>
	</head>
	<body>
		<div class="test-div" ng-controller="myCtrl1">
			<select ng-model="selectedCar">
				<option ng-repeat="car in cars" value="{{car.brand}}">{{car.name}}</option>
			</select>
			<p>Selected Car: {{selectedCar}}</p>
		</div>
		
		<div class="test-div" ng-controller="myCtrl2">
			<select ng-model="selectedColor" ng-options="color for color in colors"></select>
			<p>Selected Color: {{selectedColor}}</p>
		</div>

		<div class="test-div" ng-controller="myCtrl3">
			<select ng-model="selectedCar" ng-options="car.brand for car in cars"></select>
			<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>
		</div>

		<div class="test-div" ng-controller="myCtrl4">
			<select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select>
			<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>
		</div>

		<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
		<script type="text/javascript">
			var myApp = angular.module("myApp", []);
			
			myApp.controller("myCtrl1", function($scope) {
				$scope.cars = [
					{brand:"BMW",name:"宝马"},
					{brand:"Benz",name:"奔驰"},
					{brand:"Audi",name:"奥迪"}
				];
			});
			
			myApp.controller("myCtrl2", function($scope) {
				$scope.colors = ["Red", "Green", "Blue"];
			});
			
			myApp.controller("myCtrl3", function($scope) {
				$scope.cars = [
					{brand:"BMW",name:"宝马",color:"Red"},
					{brand:"Benz",name:"奔驰",color:"Green"},
					{brand:"Audi",name:"奥迪",color:"Blue"}
				];
			});
			
			myApp.controller("myCtrl4", function($scope) {
				$scope.cars = {
					BMW: {name:"宝马",color:"红色"},
					Benz: {name:"奔驰",color:"蓝色"},
					Audi: {name:"奥迪",color:"绿色"}
				};
			});
		</script>
	</body>
</html>

dl0246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs速成学习个人理解_8form中的下拉框

在开发中下拉框往往会做成组件化。angular可以灵活的给下拉框赋值或选取值、选取对象。方式一：直接在option上循环给定数据如下：数据是一个数组。 $scope.cars = [ {brand:"BMW",name:"宝马"}, {brand:"Benz",name:"奔驰"}, {brand:"Audi",name:"奥迪"}
复制链接

扫一扫