AngularJS select下拉框的使用

来源：互联网发布：上海行知教育骗局编辑：程序博客网时间：2024/06/04 19:04
http://www.cnblogs.com/wolf-sun/p/4614532.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Select Demo</title><script type="text/javascript" src="js/angular.min.js" ></script></head><body ng-app="myApp" ng-controller="myCtrl"><!-- ng-options --><!-- 数据源为数组 --><select name="" ng-model="selectedCar" ng-options="car for car in Cars"></select><!-- 数据源为对象数组 --><select name="" ng-model="selectedSite" ng-options="site.site as site.site for site in Sites "></select><!-- 数据源为对象 --><select name="" ng-model="selectedsite" ng-options="x for (x, y) in sites "></select><!-- 数据源为对象且数据源的属性值也为对象 --><select name="" ng-model="selectedcar" ng-options="y.brand as y.brand for (x, y) in cars "></select><!-- 用对象的键-值作为选中的标签组 --><select name="" ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities "></select><br /><br /><!-- ng-repeat --><!-- 数据源为数组 --><select ng-model="selectedCar"><option ng-repeat="car in Cars">{{car}}</option></select><!-- 数据源为对象数组 --><select ng-model="selectedSite"><option ng-repeat="site in Sites">{{site.site}}</option></select><script>var app = angular.module("myApp", []).controller('myCtrl', function($scope) {//数组$scope.Cars = ['奔驰', '宝马', '三菱'];$scope.selectedCar = $scope.Cars[0];//对象数组$scope.Sites = [    {site : "Google", url : "http://www.google.com"},    {site : "Runoob", url : "http://www.runoob.com"},    {site : "Taobao", url : "http://www.taobao.com"}];$scope.selectedSite = $scope.Sites[0].site;//对象$scope.sites = {    site01 : "Google",    site02 : "Runoob",    site03 : "Taobao"};$scope.selectedsite = $scope.sites.site01;//数据源为对象且数据源的属性值也为对象$scope.cars = {        car01 : {brand : "Ford", model : "Mustang", color : "red"},        car02 : {brand : "Fiat", model : "500", color : "white"},        car03 : {brand : "Volvo", model : "XC90", color : "black"}    };    $scope.selectedcar = $scope.cars.car01.brand;        $scope.mycity = '北京';            $scope.Cities = [            { id: 1, name: '北京', group: '中国' },            { id: 2, name: '上海', group: '中国' },            { id: 3, name: '广州', group: '中国' },            { id: 4, name: '纽约', group: '美国' }            ];});</script></body></html>
阅读全文
0 0