javascript - AngularJS：为什么我的 ng-change 不记录实际的模型项，而是记录绑定文本？

Question

我的模型是vh.loadedViews包含 4 个项目的数组。

我的 ng-repeat 选项：ng-repeat="view in vh.loadedViews"

我的 ng-model 选择：ng-model="view.description"

但是在我的 ng-change 函数中vh.chooseView，它打印的是绑定文本，而不是实际的模型数据。

标记：

<section class="saved-views-modal" ng-show="vh.loadSavedModal">
    <header><h1>Select a saved view</h1></header>

    <select name="select"
            ng-model="view.description"
            ng-change="vh.chooseView(view.description)">

        <option ng-repeat="view in vh.loadedViews"
                value="view.description">{{view.description}}</option>
    </select>

    <button class="btn-green"
            ng-click="vh.loadSavedView(view.description)">
                Load View
    </button>
</section>

指令控制器：

var vm = this; // vh in markup

vm.chooseView = function(description) {
    console.log('chooseView > view.description: ');
    console.log(description);
}

Answer 1

您尚未填充value选项的标签。您应该使用插值value="{{view.description}}"来填充它，例如呈现选项值。

你也应该用 ng-modelng-model="vh.description"代替view.description

标记

<select name="select"
        ng-model="vh.description"
        ng-change="vh.chooseView(view.description)">

    <option ng-repeat="view in vh.loadedViews"
            value="{{view.description}}">{{view.description}}</option>
</select>