AngularJS和Typeahead:根据选定的值访问数组中的数组(AngularJS and Typeahead : Accessing an array within an array base

编程入门 行业动态 更新时间:2024-10-26 00:21:03
AngularJS和Typeahead:根据选定的值访问数组中的数组(AngularJS and Typeahead : Accessing an array within an array based on a selected value)

我是AngularJS领域的新成员,希望能帮助您找到答案:在我的控制器中,我有以下列表/对象:

$scope.languageModel = { brands: [{ id: 1, name: 'ALGS' }, { id: 2, name: 'BLVT' }], commodities: [ { id: 1, name: 'Apples', varieties: [{ id: 1, name: 'GS' }, { id: 2, name: 'GX' }], sizes: [{ id: 1, name: 'S' }, { id: 2, name: 'M' }], qualities: [{ id: 1, name: 'LQ' }, { id: 2, name: 'GQ' }] }, { id: 2, name: 'Oranges', varieties: [{ id: 1, name: 'OR' }, { id: 2, name: 'ZO' }], sizes: [{ id: 1, name: 'S' }, { id: 2, name: 'M' }], qualities: [{ id: 1, name: 'LQ' }, { id: 2, name: 'GQ' }] } ] }

languageModel充当数据填充到的对象:

<th> <input id="brand" type="text" ng-model="selected.brand" ng-required="true" placeholder="Brand" uib-typeahead="brand.name for brand in languageModel.brands" class="form-control"> </th> <th> <input id="commodity" type="text" ng-model="selected.commodities" ng-required="true" placeholder="Commodity" uib-typeahead="commodities.name for commodities in languageModel.commodities" class="form-control"> </th> <th> <input id="variety" type="text" ng-model="selected.variety" ng-required="true" placeholder="Variety" uib-typeahead="varieties.name for varieties in getAttributeType(selected.commodity.varieties, 'varieties')" class="form-control"> </th> <th> <input id="size" type="text" ng-model="selected.size" ng-required="true" placeholder="Size" uib-typeahead="size.name for sizes in getAttributeType(selected.commodity, 'size')" typeahead-on-select="setItem('size')" class="form-control"> </th>

这些当然位于桌子上。 上面提到的所有代码都是我目前拥有的代码。 我想知道的是如何确保#variety(同样适用于#size)由选定的#commodity填充。

例如,如果我选择苹果作为我的#商品,那么#variety的列由苹果商品列表中的品种填充。

#brands和#commodity填充正常并且按照他们应该的方式工作,但是getAttributeType()似乎不起作用,并且当我运行应用程序时,#commodity上的下面的框基本上被视为普通文本框。

I am new in the area concerning AngularJS and would like help figuring this out: In my controller I have the following list/object:

$scope.languageModel = { brands: [{ id: 1, name: 'ALGS' }, { id: 2, name: 'BLVT' }], commodities: [ { id: 1, name: 'Apples', varieties: [{ id: 1, name: 'GS' }, { id: 2, name: 'GX' }], sizes: [{ id: 1, name: 'S' }, { id: 2, name: 'M' }], qualities: [{ id: 1, name: 'LQ' }, { id: 2, name: 'GQ' }] }, { id: 2, name: 'Oranges', varieties: [{ id: 1, name: 'OR' }, { id: 2, name: 'ZO' }], sizes: [{ id: 1, name: 'S' }, { id: 2, name: 'M' }], qualities: [{ id: 1, name: 'LQ' }, { id: 2, name: 'GQ' }] } ] }

The languageModel serve as the object from which data is populate into:

<th> <input id="brand" type="text" ng-model="selected.brand" ng-required="true" placeholder="Brand" uib-typeahead="brand.name for brand in languageModel.brands" class="form-control"> </th> <th> <input id="commodity" type="text" ng-model="selected.commodities" ng-required="true" placeholder="Commodity" uib-typeahead="commodities.name for commodities in languageModel.commodities" class="form-control"> </th> <th> <input id="variety" type="text" ng-model="selected.variety" ng-required="true" placeholder="Variety" uib-typeahead="varieties.name for varieties in getAttributeType(selected.commodity.varieties, 'varieties')" class="form-control"> </th> <th> <input id="size" type="text" ng-model="selected.size" ng-required="true" placeholder="Size" uib-typeahead="size.name for sizes in getAttributeType(selected.commodity, 'size')" typeahead-on-select="setItem('size')" class="form-control"> </th>

These are of course located in a table. All the above mentioned code is what I currently have. What I would like to know is how to ensure that #variety (same goes for #size) is populated by the #commodity selected.

For example if I had selected Apples as my #commodity then the column for #variety is populated by the varieties in the list of the Apples commodity.

The #brands and #commodity populate fine and work as they should, however getAttributeType() doesn't seem to work and when I run the app the boxes following on #commodity is basically treated as normal textboxes.

最满意答案

应该这样:

uib-typeahead="size.name for sizes in getAttributeType(selected.commodity, 'size')"

是:

uib-typeahead="size.name for sizes in getAttributeType(selected.commodity.sizes, 'size')"

如果这不起作用,你可以发布一个活塞或codepen?

Should this:

uib-typeahead="size.name for sizes in getAttributeType(selected.commodity, 'size')"

be:

uib-typeahead="size.name for sizes in getAttributeType(selected.commodity.sizes, 'size')"

If that doesn't work can you post a plunker or codepen?

更多推荐

#commodity,id,selected,varieties,电脑培训,计算机培训,IT培训"/> <meta name=&q

本文发布于:2023-07-16 12:37:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1128539.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:数组   组中   Typeahead   AngularJS   selected

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!