ng-options 没有按预期运行，如记录的那样？

Question

无论我尝试什么，ID 总是作为值传递。我想要 Genre.label(string) 作为值...

我正在努力了解 ng-options，我阅读了文档，这些示例看起来很简单，但是我得到的结果与预期的不同。

我的图书模型是

Book: {
    title: string,
    genre: string,
    description: string
}

我的流派模型是

Genre: {
    label: string
    description: string
}

然后当我使用 ng-init="getGenres()" 将流派纳入我的范围时，我期望使用

ng-options="genre.label for genre in genres track by genre.label"

将在每次迭代中使用 LABEL 并使用 LABEL 填充选项值，事实上 - Inspect Element 确实显示 - 它看起来像这样：

<option label="Sci-fi" value="Sci-fi">Sci-fi</option>

然而我的数据最终看起来像这样：

_id : 5a2f...5691
genre : "5a2f552765226c3018be9878"
title : "Blah Blah"

这是上下文中的形式：

<form ng-submit="addBook()" ng-init="getGenres()" >
    <div class="form-group" >
        <label>Title</label>
        <input type="text" class="form-control" ng-model="book.title" placeholder="Title" >
    </div>
    <div class="form-group" >
        <label>Genre</label>
        <select class="form-control" ng-model="book.genre"
                ng-options="genre.label for genre in genres track by genre.label" >
            <option value="">-- choose genre --</option>
        </select>
    </div>
</form>

这是 COLTROLLERs getGenres：

// get genres
$scope.getGenres = function() {
    $http.get('/api/genres')
    .success(function(response) {
        $scope.genres = response;
    });
}

它returns:

[{
    "_id": "5a2f5.....a065b",
    "label": "Sci-fi",
    "description": "Dealing with subject matter that combines fictional worlds and science, both real and theoretical."
}, {
    "_id": "5a2f5.....9877",
    "label": "Romance",
    "description": "Topics with amorous overtone, undertones and toneless rantings. Matters of the heart. Emotional folly and frolic."
}, {
    "_id": "5a2f5.....9878",
    "label": "Suspense",
    "description": "Events dealing with an arousal of anticipation and dread, mostly in equal parts."
}, {
    "_id": "5a2f5.....9879",
    "label": "Gobbeldegook",
    "description": "nonsensical gibberish. blather, post-moderistic drivel."
}, {
    "_id": "5a2f5.....987a",
    "label": "Drama",
    "description": "Drama Drama Drama Drama Drama Drama Drama"
}, {
    "_id": "5a2f5.....987b",
    "label": "NonFiction",
    "description": "Real life crap. No fakery or literary license, this is REAL!"
}]

非常感谢任何帮助 -干杯

Answer 1

你应该这样使用：

    <select class="form-control" ng-model="book.genre"
            ng-options="genre.label  as genre.label for genre in genres track by genre.label" >
        <option value="">-- choose genre --</option>
    </select>

如果您不使用 genre.label as ，在这种情况下将使用流派作为模型。
as 之前的表达式 genre.label 将用作模型值。
as后的表达式genre.label将作为选项中的显示值。

ng-options 没有按预期运行，如记录的那样？

ng-options not behaving as expected,as documented?

angularjs

angularjs-ng-options