// declare a module var myApp = this.angular.module('myApp', []); // declare a controller myApp.controller('SelectCtrl', function ($scope) { //Function to generate data $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); });
<!-- 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> </tr> </table> </div> </body>
table { width:100%; } tr { width:100%; } td { width:100%; text-align:center; } button { width:150px; }