Angular select

发布时间：2020-12-17 09:40:30 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtmlhead meta name="viewport" content="width=device-width" / titleRegister/title link href="~/Content/bootstrap.css" rel="stylesheet" / script src="~/Scripts/angular.js"/script script src="~/Scripts/angular-messages.js"/script

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!