angularjs - 根据两个不同的数据使用 otpgroup 创建选择

标签 angularjs ionic-framework angularjs-ng-repeat angularjs-ng-options optgroup

嗨, friend ,这里有两个数据在一个 JSON 文件中,我需要根据国家/地区字段创建选择选项并根据位置字段显示数据

"countries": [
        {
            "id": "75",
            "country": "France"
        },
        {
            "id": "82",
            "country": "Germany"
        },
        {
            "id": "208",
            "country": "Switzerland"
        },
        {
            "id": "226",
            "country": "United Kingdom"
        },
        {
            "id": "227",
            "country": "United States"
        }
    ],
    location": [
        {
            "id": "49",
            "name": "Aberdeen",
            "country_id": "226",
            "country": "United Kingdom"
        },
        {
            "id": "52",
            "name": "All Cities",
            "country_id": "226",
            "country": "United Kingdom"
        },
        {
            "id": "51",
            "name": "All Cities",
            "country_id": "82",
            "country": "Germany"
        },
        {
            "id": "50",
            "name": "All Cities",
            "country_id": "227",
            "country": "United States"
        }
        {
            "id": "31",
            "name": "San Jose",
            "country_id": "227",
            "country": "United States"
        },
        {
            "id": "42",
            "name": "Seattle",
            "country_id": "227",
            "country": "United States"
        },
        {
            "id": "18",
            "name": "Stuttgart",
            "country_id": "82",
            "country": "Germany"
        },
        {
            "id": "41",
            "name": "Washington DC",
            "country_id": "227",
            "country": "United States"
        }
    ],

HTML文件
 <select ng-model="location">
                <optgroup ng-repeat="data in location"  label="{{data.country}}">
                    <option ng-repeat="item in data" value="{{data.country}}::{{item.name}}">{{item.name}}</option>
                </optgroup>
  </select>

我需要显示我的数据如下:

enter image description here

我尝试了上面的代码,但没有成功。请帮忙

最佳答案

无需使用不同的数组,您也可以通过仅使用位置数组来完成,如下所示

 <select ng-model="location" ng-options="option.name as option.name group by option.country for option in locations"></select>

Check this working example

关于angularjs - 根据两个不同的数据使用 otpgroup 创建选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41258966/

相关文章:

javascript - 无法查看 ion-content

select - Ionic 2 ionic 选择不显示所选选项

javascript - ng-show 不适用于 Ionic 框架

javascript - 关于在 Angular JS 中创建矩阵表的建议

angularjs - 动态创建的指令属性在 AngularJS 的 ng-repeat 中不起作用

java - Spring MultipartFiles 在混合多部分中重复文件

javascript - AngularJS:将服务注入(inject) HTTP 拦截器(循环依赖)

javascript - 在 prompt() 中添加文本?

javascript - Ng-Repeat,如何测试最后一个 ng-show 元素

javascript - AngularJS:如何访问元素上的 clientWidth (普通 JS 方法)