AngularJS select

最新推荐文章于 2020-03-02 15:49:24 发布

KingCruel

最新推荐文章于 2020-03-02 15:49:24 发布

阅读量462

点赞数

分类专栏： AngularJS 文章标签： angular ng-change ng-options

本文链接：https://blog.csdn.net/KingCruel/article/details/54617130

版权

AngularJS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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

KingCruel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS select

Register angular.module('myApp', ['ngMessages']) .controller('validationController', ['$scope', function ($scope) { $scope.trees = ["松树", "樟树", "枫树", "枣
复制链接

扫一扫

专栏目录