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

2

スタックオーバーフローがあなたの質問を見ることを提案したとき、私はあなたとほぼ同じ質問をしている最中でした。同じ情報源から国リストを取得したようです。構造も変えたくなかった。しかし、受け入れられた回答を見た後、そのようにハックしたくありませんでした。その代わりに、同様のデータ構造をモーフィングする再利用可能なサービスを作成しました。

サービス

/*
 * 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 に答える