Select + Option in Angular

Playing with different <select> element to test it across different browser

by nekyouto

HTML

<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
    <div ng-controller="SelectCtrl">
        <table>
            <tr>
                <td> <span>Dropdown 1:</span>
                    <select ng-model="selectedItem1" ng-options="item.label for item in myData1" />
                </td>
            </tr>
            <tr>
                <td> <span>Dropdown 2:</span>
                    <select ng-model="selectedItem2">
                        <option ng-selected="selectedItem2 == item" ng-repeat="item in myData2" value="{{item}}">{{item.label}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td> <span>Dropdown 3:</span>
                    <select ng-model="selectedItem3">
                        <option ng-selected="selectedItem3 == myData3[0]" value="{{myData3[0]}}">{{myData3[0].label}}</option>
                        <option ng-selected="selectedItem3 == myData3[1]" value="{{myData3[1]}}">{{myData3[1].label}}</option>
                        <option ng-selected="selectedItem3 == myData3[2]" value="{{myData3[2]}}">{{myData3[2].label}}</option>
                        <option ng-selected="selectedItem3 == myData3[3]" value="{{myData3[3]}}" ng-show="myData3.length > 3">{{myData3[3].label}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <button ng-click="generateData(0);">Select Default</button>
                    <button ng-click="generateData(1);">Select Manipulated</button>
                </td>
            </tr>
            <tr>
                <td><span>Selection Result for Dropdown 1:</span>
{{selectedItem1}}</td>
            </tr>
            <tr>
                <td><span>Selection Result for Dropdown 2:</span>
{{selectedItem2}}</td>
            </tr>
            <tr>
                <td><span>Selection Result for Dropdown 3:</span>
{{selectedItem3}}</td>
           ...

CSS

table {
    width:100%;
}

tr {
    width:100%;
}

td {
    width:100%;
    text-align:center;
}

button {
    width:150px;
}

JavaScript

// declare a module
var myApp = this.angular.module('myApp', []);

// declare a controller
myApp.controller('SelectCtrl', function ($scope) {
    //Function to generate data
    
    $scope.alertData = function(){
alert($scope.selectedItem1.label);        
    }
    
    $scope.generateData = function (num) {
        $scope.myData1 = [{
            label: "Item 1",
            value: "A"
        }, {
            label: "Item 2",
            value: "B"
        }, {
            label: "Item 3",
            value: "C"
        }, {
            label: "Item 4",
            value: "D"
        }];
        $scope.myData2 = [{
            label: "Item 1",
            value: "A"
        }, {
            label: "Item 2",
            value: "B"
        }, {
            label: "Item 3",
            value: "C"
        }, {
            label: "Item 4",
            value: "D"
        }];
        $scope.myData3 = [{
            label: "Item 1",
            value: "A"
        }, {
            label: "Item 2",
            value: "B"
        }, {
            label: "Item 3",
            value: "C"
        }, {
            label: "Item 4",
            value: "D"
        }];
        if (num == 1) {
            $scope.myData1.splice(0, 1);
            $scope.myData2.splice(0, 1);
            $scope.myData3.splice(0, 1);
        }
        $scope.selectedItem1 = $scope.myData1[0];
        $scope.selectedItem2 = $scope.myData2[0];
        $scope.selectedItem3 = $scope.myData3[0];
    }
    // Create a list of objects
    $scope.generateData(0);
});