Angular select

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/angularjs/148258.html

猜你在找的Angularjs相关文章