首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Simpal手风琴在AngularJS中显示不同的html div

Simpal手风琴在AngularJS中显示不同的html div
EN

Stack Overflow用户
提问于 2018-02-14 04:20:04
回答 1查看 656关注 0票数 0

我正在使用DevExtreme的UI在AngularJS注册会计师应用程序。我想使用一个手风琴,它接受HTML(为了简单起见)div,而不是数据源。如果有人可以提供代码片段或其他东西,那就太好了(我已经看过devExtreme文档了)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-14 10:36:37

我认为他们不支持控制的方式,你希望它的行为。我确信您必须定义dataSource或items属性,并告诉它模板是什么。考虑到这一点,为什么不像这样直接在数据源中提供内容:

代码语言:javascript
复制
<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代码就可以像这样使手风琴更加完整。

代码语言:javascript
复制
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>",
    }
];

这可以很好地工作,正如我们可以看到的这里

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48779615

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档