Angularjs crash learning personal understanding of the drop-down box in _8form

In development, drop-down boxes are often made into components. Angular can flexibly assign or select values and objects to drop-down boxes.

Method 1: loop directly on the option

Given data is as follows: data is an array.

				$scope.cars = [
					{brand:"BMW",name:"宝马"},
					{brand:"Benz",name:"奔驰"},
					{brand:"Audi",name:"奥迪"}
				];

Get the selected value through ng-model as follows:

			<select ng-model="selectedCar">
				<option ng-repeat="car in cars" value="{{car.brand}}">{{car.name}}</option>
			</select>
			<p>Selected Car: {{selectedCar}}</p>

The results are relatively simple.

<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>

Method two: for. . . in syntax. More object information can be obtained.

First encapsulate the data as follows:

				$scope.cars = [
					{brand:"BMW",name:"宝马",color:"Red"},
					{brand:"Benz",name:"奔驰",color:"Green"},
					{brand:"Audi",name:"奥迪",color:"Blue"}
				];

This is achieved by adding ng-option syntax to the select tag. ng-options="car.brand for car in cars">. car.brand is used as the value label as follows:

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

Generated html code: .

Method 3: x from (x, y) in syntax.

The selected value will be an object. Data are as follows:

				$scope.cars = {
					BMW: {name:"BMW",color:"Red"},
					Benz: {name:"Benz",color:"Blue"},
					Audi: {name:"Audi",color:"green"}
				};

The key is BMW\Benz\Audi. The value is the corresponding object.

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

The complete code is as follows:

<!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:"BMW",color:"Red"},
					Benz: {name:"Benz",color:"Blue"},
					Audi: {name:"Audi",color:"green"}
				};
			});
		</script>
	</body>
</html>

Angularjs crash learning personal understanding of the drop-down box in _8form

Guess you like