2

我有以下从第三方获得的数据：

countries: [
    {"US":"United States"},
    {"CA":"Canada"},
    {"AF":"Afghanistan"},
    {"AL":"Albania"},
    {"DZ":"Algeria"},
    {"DS":"American Samoa"},
    .....
];

数据的组织方式不是我会做的，但现在我需要将所有这些都放在带有 ng-options 的选择中，以便显示的值和选项都是国家/地区的全名

我已经尝试过ng-options="code as name for (code, name) in countries"，但我得到一个对象作为我的选择值。

4

3 回答 3

5

在这里工作 plunkr：http://plnkr.co/edit/nbWHZ8g4Gn0vGuSHM5o0?p= preview

尽管正如 Nicolas 指出的那样，转换数据可能更好？

HTML：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="AppCtrl">

    <select id="countries" name="countries" ng-model="selectedCountry" 
            ng-options="getKey(country) as country[getKey(country)] for country in countries"></select>

    Selected country: {{selectedCountry}}
  </body>

</html>

JS：

// Code goes here

angular.module('app',[]).controller("AppCtrl", ["$scope", function($scope) {
    $scope.countries = [
    {"US":"United States"},
    {"CA":"Canada"},
    {"AF":"Afghanistan"},
    {"AL":"Albania"},
    {"DZ":"Algeria"},
    {"DS":"American Samoa"}
];

  $scope.getKey = function(country) {
    return Object.keys(country)[0];
  }
  }]);
于 2014-03-18T21:05:31.813 回答
2

当 Stack Overflow 建议我查看您的问题时，我正在提出与您几乎相同的问题。看起来我们从同一来源获得了我们的国家/地区列表。我也不想改变结构。但是在看到接受的答案之后，我不想那样破解它。因此，我编写了一个可重用的服务，它将变形任何类似的数据结构。

服务

/*
 * Morphs an array of a key/val pair to have the original key, be a value, and 
 * give new property names
 *
 * @method keyValMorph
 * @param {array of objects}    ex: [ {US:'United States'} ]
 * @param {string}  keyName - desired property name for the original key
 * @param {string}  valName - desired property name for the original value
 * @return {array of objects}   ex: [ {key: 'US', val: 'United States'} ]
 */
.factory('keyValMorph', function () {
    return function (data, keyName, valName) {
    var sort = [], keyName = keyName || 'key', valName = valName || 'val';

    for (var i = 0; i < data.length; i++) {
        var obj = {};
        for (var key in data[i]) {
            obj[keyName] = key;
            obj[valName] = data[i][key];
            sort.push(obj);
        }
    }
    return sort;
    };
})

控制器调用：

$scope.countriesSorted = keyValMorph($scope.countries, 'code', 'name');

它将采用您的原始数据结构并将其转换为：

$scope.countriesSorted = [
    {code:"US", name:"United States"},
    {code:"CA", name:"Canada"},
    {code:"AF", name:"Afghanistan"},
    {code:"AL", name:"Albania"},
    {code:"DZ", name:"Algeria"},
    {code:"DS", name:"American Samoa"}
];

HTML

<select data-ng-model="selected" data-ng-options="country.code as country.name for country in countriesSorted ">
    <option value="">[-- select --]</option>
</select>
于 2014-04-11T22:42:20.357 回答
1

这是我自己的项目中的一个示例：

data-ng-options="task.name for task in tasks track by task.id"

我相信你可以适应你自己的。

于 2014-03-18T20:49:59.517 回答