8、angular的select
生活随笔
收集整理的這篇文章主要介紹了
8、angular的select
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、數(shù)據(jù)源為數(shù)組
x?for?x?in?names第一個(gè)x代表在下拉框內(nèi)顯示的數(shù)據(jù)??第二個(gè)x指的是在names里數(shù)據(jù) <!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、數(shù)據(jù)源為數(shù)組對(duì)象時(shí)
ng-options 選中的是一個(gè)對(duì)象
而repeat選中的是一個(gè)字符串
x.site?for?x?in?names第一個(gè)x代表在下拉框內(nèi)顯示的數(shù)據(jù)??要顯示url?就是?x.url?for?x?in?names
第二個(gè)為?{site?:?"Google",?url?:?"http://www.google.com"}對(duì)象 <!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網(wǎng)址為{{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、數(shù)據(jù)源為json對(duì)象
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、數(shù)據(jù)源為json對(duì)象
選中的值得json對(duì)象?
{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>注意選中的值是一個(gè)對(duì)象。</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、設(shè)置初始值
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;??//設(shè)置第2個(gè)為初始值；});
5、
下拉框初始化無默認(rèn)值，或者有空白選項(xiàng)，影響美觀，可通過以下方法調(diào)整：
-
?1.給定初始化信息（ng-init）
-
?2.隱藏空白選項(xiàng)（ng-show="false"）
??選擇一個(gè)選項(xiàng):??
??<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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhangshuda/p/7640061.html
總結(jié)
以上是生活随笔為你收集整理的8、angular的select的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分布分析
- 下一篇： 集美大学1414班软件工程个人作业2——