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

最新推荐文章于 2022-12-26 14:42:25 发布

原创最新推荐文章于 2022-12-26 14:42:25 发布 · 7.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJs 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了AngularJS中使用下拉框(select)时出现空白项的问题，并通过实例展示了如何正确设置ng-model和ng-options以避免此现象。

事件背景

开发技术是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)