微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Angular select

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐