Simpal dx-Accordion 在 AngularJS 中显示不同的 html div

Question

我在 AngularJS CPA 应用程序中为 UI 使用 DevExtreme。我想使用接受 HTML（为简单起见）div 而不是数据源的手风琴。如果有人可以提供代码片段或其他东西，那就太好了（我已经阅读了 devExtreme 文档）

Answer 1

我认为他们不以您希望的方式支持该控件。我很确定您必须定义数据源或项目属性并告诉它模板是什么。考虑到这一点，为什么不直接像这样直接提供数据源中的内容：

<div id="accordion"></div>

<!-- Your title template -->
<script type="text/html" id="title">
  <h1><%= Title%></h1>
</script>

<!-- Your content template -->    
<script type="text/html" id="myItem">
    <div class="accodion-item">
            <%= Content%>
    </div>
</script>

这样你就可以拥有任何你喜欢的内容。只需添加 JS 代码即可像这样初始化手风琴。

DevExpress.viz.currentTheme("generic.light");

$(function () {
    DevExpress.ui.setTemplateEngine("underscore");
    var accordion = $("#accordion").dxAccordion({
        dataSource: accordionItems,
        animationDuration: 300,
        collapsible: false,
        multiple: false,
        selectedItems: accordionItems[0],
        keyExpr: "ID",
        itemTitleTemplate: $("#title"),
        itemTemplate: $("#myItem")
    }).dxAccordion("instance");
});

var accordionItems = [
    {
        "ID": 1,
        "Title": "Hey",
        "Content": "<div>There is some content in this div.</div>",
    }, 
    {
        "ID": 2,
        "Title": "Second part",
        "Content": "<div><p>This is a paragraph in a div. Enjoy it!</p></div>",
    }
];

可以看出，这工作正常 here。

Simpal dx-Accordion 在 AngularJS 中显示不同的 html div

Simpal dx-Accordion to display different html divs in AngularJS

user-interface

angularjs

devextreme