开发技术是AngularJs,上周五,开发页面的时候,有个下拉选框(select),用ng-model绑定了一个值A,选项是在另外一个数组B里面的内容,做成的页面里下拉选框中总有一个空白项,选中其他的选项以后,空白项有消失了,给人的感觉很不好。所以就这个专题尝试了一下。
(代码的风格可能不太好,请路过大大多指点(:3/L))
首先是html:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><!-- 正常显示中文用到的-->
<title></title>
</head>
<style>
select {
width: 200px;
}
</style>
<body ng-app="tapp">
<div ng-controller="tCtrl">
<!-- {{ data[0].value}} -->
<!-- <div ng-repeat="obj in data">{{obj}}</div> -->
js初始化:$scope.selectedOne={};<br>
第一个select:<select ng-model="selectedOne.value" ng-options="obj.value as obj.text for obj in data"></select><br>
第一个select所选的value: {{selectedOne}}
<p></p>
js初始化:$scope.selectedTwo='';<br>
第二个select:<select ng-model="selectedTwo.value" ng-options="obj.value as obj.text for obj in data"></select><br>
第二个select所选的value: {{selectedTwo}}
<p></p>
js初始化:$scope.selectedThree={value:''};<br>
第三个select:<select ng-model="selectedThree.value" ng-options="obj.value as obj.text for obj in data"></select><br>
第三个select所选的value: {{selectedThree}}
<p></p>
js初始化:$scope.selectedFour={value:'0',text:''};<br>
第四个select:<select ng-model="selectedFour.value" ng-options="obj.value as obj.text for obj in data"></select><br>
第四个select所选的value: {{selectedFour}}
<p></p>
js初始化:$scope.selectedFive={value:'0',text:'hahaha'};<br>
第五个select:<select ng-model="selectedFive.value" ng-options="obj.value as obj.text for obj in data"></select><br>
第五个select所选的value: {{selectedFive}}
<p></p>
js初始化:$scope.selectedFive={value:'',text:'hahaha'};<br>
第六个select:<select ng-model="selectedSix.value" ng-options="obj.value as obj.text for obj in data">
<option ng-init="">我来代表直接写option不写value的一项空白</option>
</select><br>
第六个select所选的value: {{selectedSix}}
</div>
</body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="template.js"></script>
</html>
然后是js代码:
var tapp =angular.module('tapp', []);//原来定义的变量和APP的名字应该是一样的才行,左边这句话待验证
tapp.controller('tCtrl', function($scope){
$scope.data=[
{
value:'0',
text:'zero'
},{
value:'1',
text:'one'
},{
value:'2',
text:'two'
},{
value:'3',
text:'three'
},{
value:'4',
text:'four'
},{
value:'5',
text:'我是来代表空白的'
}
];
$scope.selectedOne={};
$scope.selectedTwo='';
$scope.selectedThree={
value:''
};
$scope.selectedFour={
value:'0',
text:''
};
$scope.selectedFive={
value:'0',
text:'hahaha'
};
$scope.selectedSix={
value:'',
text:'hahaha'
};
});
如果ng-model所绑定的变量的值在ng-options绑定的value里面有,下拉选框中就不会有空白的一项,选中别的数据项以后消失;
如果ng-model所绑定的变量的值不再ng-options绑定的value里面,下拉选框中就不会有空白一项,并且只有当ng-options绑定的value里有对应的text为空行时,这个空行才会一直存在于下拉选项里。
tip:要对应字段绑定,否则原来定义给变量的json串会被刷掉。
并且ng-model只绑定option的value值,本身有的text的值也不会被显示。就算在里面写option的文字内容或者ng-init也没用。
注意js里面的赋值要写成json的初始化语句,用“:”来赋值,否则会报错。再次强调注意赋值的顺序!!!!!!!不然变量的json格式会被刷掉!!
综上所述想要有一行是空行,就在ng-options的字典项里有一个value值对应的text为“”,并且先把ng-model的变量json的某一个字段附上这个value值,以后对于这个变量得赋值都要一项一项数据项的赋值。
关于上周末的问题,我认为在对于变量的赋值顺序和方式上面出了问题(:3/L)
select如果不写ng-model,下拉选框没有选项。写的时候别忘了,免得再调试半天。