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

Question

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

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

我在 select 上的 ng-模型：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-model 应该是 ng-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>