8、angular的select

最新推荐文章于 2021-02-15 13:29:34 发布

weixin_30493401

最新推荐文章于 2021-02-15 13:29:34 发布

阅读量178

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zhangshuda/p/7640061.html

版权

1、数据源为数组

x for x in names
第一个x代表在下拉框内显示的数据  第二个x指的是在names里数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">  
        <select ng-model="selectName" ng-options="x for x in names"></select>
        1您选择的是：{{selectName}}
        
        <select ng-model="selectName1">
            <option ng-repeat="x in names">{{x}}</option>
        </select>
        2您选择的是{{selectName1}}
    </div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names=['zhang','wang','li']
});
</script>

2、数据源为数组对象时

ng-options 选中的是一个对象

而repeat选中的是一个字符串

x.site for x in names
第一个x代表在下拉框内显示的数据  要显示url 就是 x.url for x in names
第二个为 {site : "Google", url : "http://www.google.com"}对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">  
        <select ng-model="selectName" ng-options="x.site for x in names"></select>
        1您选择的是：{{selectName.site}}
        2网址为{{selectName.url}}
        
        <select ng-model="selectName1">
            <option ng-repeat="x in names" value="{{x.url}}">{{x.site}}</option>
        </select>
        2您选择的是{{selectName1}}
    </div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
    ];
});
</script>

3、数据源为json对象

ng-repeat选中的值和select显示一样

ng-options选中的value可以和select的显示不同

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">  
        <select ng-model="selectName" ng-options=" x for (x, y) in names"></select>
        1您选择的是{{selectName}}
        
        <select ng-model="selectName1">
        <option ng-repeat="x in names" >{{x}}</option>
        </select>
        2您选择的是{{selectName1}}
    </div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = {
    site01 : "Google",
    site02 : "Runoob",
    site03 : "Taobao"
    };
});
</script>

3、数据源为json对象

选中的值得json对象

{brand : "Ford", model : "Mustang", color : "red"}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择一辆车:</p>

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>

<p>注意选中的值是一个对象。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

</body>
</html>

4、设置初始值

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {
    $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.car02;  //设置第2个为初始值；});

5、

下拉框初始化无默认值，或者有空白选项，影响美观，可通过以下方法调整：

1.给定初始化信息（ng-init）
2.隐藏空白选项（ng-show="false"）

<form>
  选择一个选项:  
  <select ng-model="myVar" ng-init="myVar='tuts'">
    <option ng-show="false" value="">
    <option value="dogs">Dogs    
    <option value="tuts">Tutorials   
    <option value="cars">Cars 
   </select>
</form>

转载于:https://www.cnblogs.com/zhangshuda/p/7640061.html