您的位置：首页 > Web前端 > AngularJS

AngularJS select

2017-01-19 16:07 465 查看

<!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, "group": "Group 1", "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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular ng-change ng-options

相关文章推荐

新的分享

章节导航