<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width" />
<title>Register</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script>
angular.module('myApp',['ngMessages'])
.controller('validationController',['$scope',function ($scope) {
$scope.trees = ["松树","樟树","枫树","枣树","桃树"];
$scope.engineer = { name: "Dancing",currentActivity: "Fixing bugs" };
$scope.activities = ["Writing code","Testing code","Fixing bugs","Dancing"];
$scope.myOptions = [
{ "id": 106,"group": "Group 1","label": "Item 1" },{ "id": 107,"label": "Item 2" },{ "id": 110,"group": "Group 2","label": "Item 3" },];
$scope.mycity = '北京';
$scope.Cities = [
{ id: 1,name: '北京' },{ id: 2,name: '上海' },{ id: 3,name: '广州' }
];
$scope.selectChange = function (val) {
console.log(val);
};
}]);
</script>
</head>
<body ng-app="myApp">
<form name="userForm" ng-controller="validationController">
<select ng-model="trees" class="form-control" ng-change="selectChange(trees)">
<option ng-repeat="tree in trees">{{tree}}</option>
</select>
<br />
<br />
<select ng-model="engineer.name" class="form-control"
ng-options="act for act in activities"></select>
<br />
<br />
<select ng-model="myOption" class="form-control" ng-change="selectChange(myOption)"
ng-options="value.id as value.label group by value.group for value in myOptions">
<option>--- 请选择 ---</option>
</select>
<br />
<br />
<select ng-model="mycity" class="form-control"
ng-options="city.name as city.name for city in Cities"></select>
<h1>欢迎来到{{mycity}}</h1>
</form>
</body>
</html>
