javascript - 在第二个选择中获取空白选项取决于第一个选择选项 - AngularJS

标签 javascript angularjs

以下是工作正常的代码,我面临的唯一问题是第一次的第二个选项值(直到未选择)为空。让我知道我在这里做错了什么。

代码-

<div>
    <h3>Select a country</h3>
    <select id="select-02" 
            class="slds-select" 
            name="country" 
            ng-model="myForm.companyaddress.country" 
            ng-options="conList.name for conList in countryList track by conList.id"
            ng-init="myForm.companyaddress.country = countryList[0]"
            ng-change="stateList = myForm.companyaddress.country.states"
            style="height: 37px;">
    </select>
</div>

<div>
    <h3>Select a state</h3>
    <select
      id="select-03"
      class="slds-select"
      style="height: 44px;"
      ng-init="myForm.companyaddress.state = countryList[0].states[0]"
      ng-options="sList.name for sList in stateList track by sList.stateid"
      ng-model="myForm.companyaddress.state">
    </select>
</div>

脚本 -

    var myApp = angular.module('myApp', []);

    myApp.controller('mainCtrl', function($scope){

        $scope.countryList = [
            {
                id: null,
                name: 'Please Select',
                states: [
                    {name: 'Please Select', stateid: null}
                ]
            },
            {
              id: 1,
              name: 'United States of America',
              states: [
              {name: 'Alabama', stateid: 1},
              {name: 'Alaska', stateid: 2},
              {name: 'Arizona', stateid: 3}
              ]
            },
            {
              id: 2,
              name: 'Australia',
              states: [
              {name: 'Australian Capital Territory', stateid: 1},
              {name: 'New South Wales', stateid: 2},
              {name: 'Northern Territory', stateid: 3}
              ]
            },
        ];

        $scope.stateList = $scope.countryList[0].states;
    })

工作 Plnkr - http://plnkr.co/edit/ZYmMJG8CbxrpdOjuUh9k?p=preview

最佳答案

到目前为止我看到的问题是,一旦您选择了一个国家/地区,myForm.companyaddress.state 选项就不在选项列表中,因此它是空白的

您可以为此更改您的第一个 ng-change

ng-change="stateList = myForm.companyaddress.country.states; myForm.companyaddress.state =  stateList[0]"

检查这个plnkr

http://plnkr.co/edit/ZYmMJG8CbxrpdOjuUh9k

关于javascript - 在第二个选择中获取空白选项取决于第一个选择选项 - AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37965958/

相关文章:

javascript - 加载本地 ParcelJS 插件

javascript - 从动态创建的表单中检索 PHP 中的数据

javascript - Webpack 输出两个包 : source is node_modules vs src?

JavaScript 不返回 int ..至少在我认为应该的时候不返回

javascript - 如何在字符串中查找字符串数组?

html - 如何使图像大小相同?

javascript - boolean 值表现为 true,但列出为 false?

javascript - 在 NodeJS 上分配变量来查询 mysql

javascript - 为父 div 的元素设置动态高度

javascript - 如何通过 npm 安装 Angular 版本 1.1.5