ng-modle对select下拉选项的影响

来源：互联网发布：淘宝元旦有活动吗编辑：程序博客网时间：2024/06/06 08:52

事件背景

开发技术是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，下拉选框没有选项。写的时候别忘了，免得再调试半天。

0 0