问题描述
限时送ChatGPT账号..我有以下 html:
<ul ng-repeat="tab.sections 中的部分"><h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, $index)"><img ng-src="{{ child.productImageURL }}"/><li>{{ child.title }}</li>
这是选项卡"javascript 对象的样子:
我想要的输出是选择该部分时为每个部分列出的子类别标题(例如children0.title)和图像(例如children0.productImageURL).
示例所需的输出:
点击分析天平时
(ML image)//这是section0.child0.productImageURLML//这是section0.child0.title(XS image)//这是section0.children1.productImageURLXS//这是section0.child1ren.title
目前,我显示这个:
当点击分析天平时:
(ML image)//这是section0.children0.productImageURLML//这是section0.children0.title(XPE image)//这是section1.children0.productImageURLXPE//这是section1.children0.title
如何根据选择的部分 (selectedSideIndex) 列出每个部分的两个子项(以及相关图像)?
除了上面的 HTML 之外,这里还有相关的 HTML 和 javascript,我尝试使用它们来实现所需的输出:
$scope.toggleSideSelect = function(ind){$scope.selectedSideIndex = ind;}$scope.sideTabIsActive = 函数(标签,$index){var selectedIndexTest = $scope.selectedSideIndex返回 $index==$scope.selectedSideIndex;
}
<ul ng-repeat="tab.sections 中的部分" ng-click="toggleSideSelect($index)"><li>{{ section.title }}</li><ul ng-repeat="child in section.children"><li>{{ child.title }}</li>
解决方案 你就快到了 :)
你需要做的是:
<ul ng-repeat="tab.sections 中的部分" ng-init="sectionIndex = $index"><h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, sectionIndex)"><img ng-src="{{ child.productImageURL }}"/><li>{{ child.title }}</li>
这样,使用 ng-init="sectionIndex = $index"
你保存了部分的 $index
并且可以在嵌套的 ng-repeat
.也可以使用 $parent.$index
但我不推荐它,因为结构可能会改变,你会留下一个错误.
这样,您可以使用该部分的索引调用 ng-if="sideTabIsActive(section, sectionIndex)"
,并且只有您活动部分的子项才能显示.
您可能应该更改
的签名$scope.sideTabIsActive = function (tab, $index)
到
$scope.sideTabIsActive = 函数($index)
因为您实际上并未在函数中使用 tab
.(如果这样做,也不要忘记从视图中更改对该函数的调用)
I have the following html:
<div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)">
<ul ng-repeat="section in tab.sections">
<h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, $index)">
<img ng-src="{{ child.productImageURL }}"/>
<li>{{ child.title }}</li>
</ul>
</div>
This is what the "tabs" javascript object looks like:
My desired output is the subcategory titles(e.g. children0.title) and image(e.g. children0.productImageURL) listed for each section when that section is selected.
Example desired output:
When Analytical Balances is clicked
(ML image) //which is section0.child0.productImageURL
ML //which is section0.child0.title
(XS image) //which is section0.children1.productImageURL
XS //which is section0.child1ren.title
Currently, I display this:
When Analytical Balances is clicked:
(ML image) //which is section0.children0.productImageURL
ML //which is section0.children0.title
(XPE image) //which is section1.children0.productImageURL
XPE //which is section1.children0.title
How can I list both children (and the associated image) for each section based on which section is selected (selectedSideIndex)?
In addition to the above HTML, here is relevant HTML and javascript that I use in my attempt to achieve the desired output:
$scope.toggleSideSelect = function(ind){
$scope.selectedSideIndex = ind;
}
$scope.sideTabIsActive = function (tab, $index) {
var selectedIndexTest = $scope.selectedSideIndex
return $index==$scope.selectedSideIndex;
}
<div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)">
<ul ng-repeat="section in tab.sections" ng-click="toggleSideSelect($index)">
<li>{{ section.title }}</li>
<ul ng-repeat="child in section.children">
<li>{{ child.title }}</li>
</ul>
</ul>
</div>
解决方案
You were almost there :)
What you need to do is this:
<div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)">
<ul ng-repeat="section in tab.sections" ng-init="sectionIndex = $index">
<h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, sectionIndex)">
<img ng-src="{{ child.productImageURL }}"/>
<li>{{ child.title }}</li>
</ul>
</div>
This way, using the ng-init="sectionIndex = $index"
you are saving the $index
of the section and can use it on the nested ng-repeat
. It's also possible to use $parent.$index
but I wouldn't recommend it since the structure might change and you will be left with a bug.
This way, you can call ng-if="sideTabIsActive(section, sectionIndex)"
using the index of the section, and only your active section's children will get to show.
Edit: you should probably change the signature of
$scope.sideTabIsActive = function (tab, $index)
to
$scope.sideTabIsActive = function ($index)
Since you're not actually using the tab
in the function. (And if you do, don't forget to change the call to that function from the view as well)
这篇关于无法使用嵌套的 ng-repeat 和 ng-if 重复正确的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论