AngularJS - ngModel 不会在 ngOptions 中更新答案

【问题标题】：AngularJS - ngModel won't update in ngOptionsAngularJS - ngModel 不会在 ngOptions 中更新
【发布时间】：2016-05-10 06:25:49
【问题描述】：

所以我在AngularJS 应用程序中使用ngOptions 和ngModel 进行选择。由于某种原因，我无法让模型更改为所选值。

$scope.selected保持初始值

    $scope.options = [];
    $scope.selected;

    $scope.save = function(){
        var item = $scope.selected;

        console.info('item : ', item)

        console.info('save : ', $scope.selected,
                    '\n', $scope.options)
    };

    function setOptions(options){
        for(var i = 0; i < options.length; i++){
            var option = {
                label: options[i].tyTxt,
                value: options[i].tyID
            };
            if(i === 0){
                $scope.selected = option.value;
            }
            $scope.options.push(option);
        }
    }

<select ng-options="item.value as item.label for item in options track by $index" ng-model="selected"></select>

<span ng-click="save()">
    save
</span>

编辑我什至试过这个：

    function setOptions(options){
        for(var i = 0; i < options.length; i++){
            var option = {
                label: options[i].tyTxt,
                value: options[i].tyID
            };
            if(i === 0){
                $scope.selected = option.value;
            }
            $scope.options.push(option.value);
        }
    }

<select ng-options="item for item in options" ng-model="selected"></select>

但结果相同

【问题讨论】：

options 来自哪里？ $scope.options 是否初始化为数组？ setOptions 有人打电话吗？
它来自另一个function，它从数据库中获取它们。我没有看到添加那部分代码的相关性，因为我正在将它们转换为新的对象。但如果需要，我会添加代码 ;-)
小心使用select as和track by ~ docs.angularjs.org/api/ng/directive/ngOptions#-select-as-
我在您的代码中没有发现任何问题。在 EDIT 之前，track by 设置不正确。看看这个提琴手 - jsfiddle.net/Lvc0u55v/3726。它按预期工作，模型正在改变。也许您可以比较并检查您的代码是否有任何问题。你能分享你的整个控制器代码吗？
@PratikBhattacharya 不错的演示，但您可能希望使用比 1.0.1 更现代的 Angular 版本。这是1.5.5版本~jsfiddle.net/Lvc0u55v/3729

标签： angularjs angular-ngmodel ng-options

【解决方案1】：

如果您使用的是 angularjs，则无需在代码中使用 setOptions() 而是从后端返回 json 响应并按如下方式初始化数组。

    <div ng-controller="MyCtrl">
      <select ng-options="item.value as item.label for item in options" ng-model="selected"></select>
    <p>
    <b>Selected value = </b>{{selected}}
    </p>
    <button ng-click="save()">
        save
    </button>
    </div>

这是控制器代码

    var myApp = angular.module('myApp',[]);
    function MyCtrl($scope) {
        $scope.save = function(){
            var item = $scope.selected;

            console.info('item : ', item)

            console.info('save : ', $scope.selected,
                        '\n', $scope.options)
        };

            $scope.options = [{label:"data-1",value:1},{label:"data-2",value:2},{
        label:"data-3",value:3}];
    }

在上面的 angularjs 代码中，$scope.options 是为示例静态声明的。您只需将响应返回到此 [{label:"data-1",value:1},{label:"data-2",value:2},{ label:"data-3",value:3}] 并将其分配给 $scope.options

【讨论】：