我正在使用cordova + onsenui + angularJs开发移动应用程序,并且填充ngRepeat列表有特殊要求。
有些项目可能具有其他参数。在那种情况下,我要显示项目的其他信息(完全归类为新的降落模式)
或在下面附加一个新的自定义项目。
到目前为止,我仅了解了如何使用一种模式(所有项目的相同参数,相同的HTML)填充列表项。我该如何进行更改,以使带有参数“ type = u”的项目具有自定义模式?(例如,按钮和文本框)
我的代码:HTML
<ons-page ng-controller="FiltersController">
<ons-list>
<ons-list-item modifier="tappable" ng-repeat="item in items">
<label class="checkbox checkbox--list-item">
<input type="checkbox" ng-model="item.selected">
<div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
<ons-icon icon="fa-comment" size="20px"></ons-icon>
{{item.name}}
</label>
</ons-list-item>
</ons-list>
</ons-page>
JS:
app.controller('FiltersController', function ($scope, $timeout) {
function FiltersController($scope) {
$scope.items = {
item1: { name: "Hamburgar", selected: false },
item2: { name: "Pasta", selected: false },
// for next item ideally I need to either:
// change how the 'repeat' element looks like
// or append new element between 'item3' and 'item4'
item3: { name: "Potato", selected: false, type: "u" },
//
item4: { name: "Makaroni", selected: false },
item5: { name: "Veg", selected: false }
};
}
FiltersController($scope);
}, 1000);
PS:加载控制器后,我无需对列表进行任何更改。因此,也许这会更容易实现。。此后,不会删除或添加任何其他元素(但用户当然会使用ngRepeat生成的列表内的复选框和按钮)。
您可以通过ng-if
在HTML元素中添加仅在项目ng-repeat
具有某些特征时仅希望显示在DOM中的语句来获得所需的结果。例如:
<ons-list-item modifier="tappable" ng-repeat="item in items">
<label class="checkbox checkbox--list-item">
<input type="checkbox" ng-model="item.selected">
</label>
<button ng-if="item.name=='Potato'">This button will only appear for item3</button>
</ons-list-item>
在以上示例中,button
如果item.name
is为,则只会在DOM中显示Potato
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句