指定一个对象来选择value - ng-options

assign a object to select value - ng-options

本文关键字：value ng-options 选择 一个对象      更新时间：2023-09-26

我有一个像这样的对象

var myObject = {'123':'something','345':'something else'}

我需要将其渲染为:

<option value={'123':'something'}>something</option>

这是我尝试过的:

ng-options="someObj as label for (id,label) in myObject

不工作!

模型得到'label'而不是整个对象。甚至可以将对象分配给SELECT元素的值属性吗?

编辑

筛选形式为:{'123':'something'，'345':'something else'}的对象

.filter('putKeysandValues',function(){
        return function(options){
            var arr = [];
            angular.forEach(options,function(value,key){
                arr.push({'key':key,'label':value})
            });
            return arr;
        }
    });

您需要提供一个键为&value属性设置为ngOptions。为此，您需要修改对象的结构以实际具有这些属性。

一种方法是使用过滤器为ngOptions返回一个有效的数组: 
ng-options="option.label for option in data.availableOptions | putKeyAndValue"

你可以检查这个活塞与工作过滤器。

如果输入是:

[{'123':'something'}, {'345':'something else'}]

则输出为:

[{"123":"something","id":123,"label":"something","$$hashKey":"object:3"},{"345":"something else","id":345,"label":"something else","$$hashKey":"object:4"}]

如果要删除过时的id属性，则使用此过滤器。

输入相同的输入，它将返回如下:

[{"id":123,"label":"something","$$hashKey":"object:3"},{"id":345,"label":"something else","$$hashKey":"object:4"}]

如果您仍然需要返回一个新的数组，那么不要在过滤器上这样做。在这种情况下，您可以在将数据传递给视图之前处理数据，所有这些都像这样在控制器中完成。

与输入:

{'123':'something', '345':'something else'}
输出:

[{"id":123,"label":"something"},{"id":345,"label":"something else"}]

使用select as something for a (key,value) in set of Values

ng-options="key as value for (key,value) in myObject"

将key放入选项值中，value放入标签中。除此之外，你还需要使用ng-model和ngChange。因为你不能将对象传递给值，所以我们的想法是在你的控制器中这样做。

<select ng-model="val" ng-change="changeVal(val)" ng-options="key as value for (key,value) in ops">

在你的控制器中你已经有了myObject你要添加selected item和changeVal函数

<script>
    var selectedObject;
    $scope.changeVal = function(val){
        selectedObject = {};
        selectedObject[val] = myObject[val];
    }
</script>

这是一个不将对象放入值attr的解决方案，因为它是一个字符串。

相关文章：