javascript - 下拉列表中选定的值无效 : Failed to set selected value

标签 javascript angularjs

我有动态生成下拉列表的代码。 我正在使用 ng-repeat 动态生成下拉列表,但我没有获得有效的选定值。
我已经更新了我的代码here
HTML

<div ng-repeat="item in items">
    <select ng-model="item.shareToOption" ng-options="c.value for c in shareToOptions"></select>
</div> 

JS

$scope.items = [
    {
    "shareToOption" : {id:1,value:"AA1"}
    },
    {
    "shareToOption" : {id:2,value:"AA2"},
    },
    {
    "shareToOption" : {id:3,value:"AA3"},
    },
    {
    "shareToOption" : {id:4,value:"AA4"}
    }
];

$scope.shareToOptions = [
    {id:1,value:"AA1"},
    {id:2,value:"AA2"},
    {id:3,value:"AA3"},
    {id:4,value:"AA4"}
];

更新 我不想对 JSON 对象进行任何更改,如何在不对 JSON 对象进行任何更改的情况下获得结果?

使用以下代码我在模型中获得了正确的 ID,但值没有得到更新。

<select class="form-control input-sm" ng-model="item.blockName.id" name="blockName" 
              ng-options="choice.id as choice.value for choice in blockNameOptions">

</select>   

引用:http://jsfiddle.net/LCJub/1/

将第一个下拉值更改为 AA2,但我仍然得到模型

[{"shareToOption":{"id":2,"value":"AA1"}},{"shareToOption":{"id":2,"value":"AA2"}},{"shareToOption":{"id":3,"value":"AA3"}},{"shareToOption":{"id":4,"value":"AA4"}}]

最佳答案

ngModel 通过引用进行比较,而不是通过值进行比较。

您需要引用 $scope.shareToOptions 中的对象:

$scope.shareToOptions = [
    {id:1,value:"AA1"},
    {id:2,value:"AA2"},
    {id:3,value:"AA3"},
    {id:4,value:"AA4"},
    {id:4,value:"AA5"},
    {id:4,value:"AA6"},
    {id:4,value:"AA7"}
];

$scope.items = [
    {
        "shareToOption" : $scope.shareToOptions[0]
    },
    {
        "shareToOption" : $scope.shareToOptions[1]
    },
    {
        "shareToOption" : $scope.shareToOptions[2]
    },
    {
        "shareToOption" : $scope.shareToOptions[3]
    }
];

演示:http://jsfiddle.net/Xr8MU/

如果您不想更改两个现有数组,我建议在 Controller 初始化时重新映射 $scope.items 以使用正确的引用:

var setReferences = function () {
    var items = $scope.items;
    for (var i = 0; i < items.length; i++) {
        var reference = $scope.shareToOptions.filter(function (option) {
            return option.id === items[i].shareToOption.id;
        })[0];

        items[i].shareToOption = reference;
    }
};

setReferences();

演示:http://jsfiddle.net/whNzw/

关于javascript - 下拉列表中选定的值无效 : Failed to set selected value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22979565/

相关文章:

javascript - 遍历 DOM 的最快方法(广度优先)

unit-testing - 为什么$provide只能在 'angular.mock.module'函数中使用,$q只能在 'angular.mock.inject'函数中使用?

javascript - 倒计时中使用 Angular 的 $interval 避免内存泄漏

javascript - 将多个值保存到隐藏字段

javascript - Url Loader,加载我的背景图片一次,然后在刷新页面后它无法显示

javascript - 如何使用 useEffect() 从 useReducer() 和 useContext() 状态管理设置中的 api 获取数据?

php - 我们可以使用 javascript 检索和设置 PHP cookie 吗

javascript - 自定义 AngularJS 指令不起作用

javascript - 需要指令 Controller 以及其他所需的 Controller

php - 把Array json放到mysql返回Array