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

事件背景

开发技术是AngularJs,上周五,开发页面的时候,有个下拉选框(select),用ng-model绑定了一个值A,选项是在另外一个数组B里面的内容,做成的页面里下拉选框中总有一个空白项,选中其他的选项以后,空白项有消失了,给人的感觉很不好。所以就这个专题尝试了一下。

代码

(代码的风格可能不太好,请路过大大多指点(:3/L)
首先是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">
            
            

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

你可能感兴趣的:(AngularJs)