在 AngularJS 模态模板中显示更多和隐藏详细信息

Question

我有一个 AngularJS 模态模板，我可以在其中投影范围内的响应。模板看起来像这样：

<div class="modal-body" id="modal-body">

<uib-accordion close-others="true">

    <div uib-accordion-group class="mt-1" ng-repeat="x in data.details" heading="{{data.displayName}}">

        <pre>{{ x|json:4 }}</pre>

    </div>

</uib-accordion>

我想首先显示一个包含最重要的“x”字段的表格，然后给出一个“showMore”字段，单击按钮后，我们将显示完整的 JSON。这里的按钮用作显示重要详细信息（表）或完整详细信息（Json 响应）的切换，我遵循较少角度的方式，但使用 Javascript 和 HTML。下面是这个实现：

<div class="modal-body" id="modal-body">

<uib-accordion close-others="true">

    <div uib-accordion-group class="mt-1" ng-repeat="x in data.details" heading="{{data.displayName}}">

        <span id="dots"> <table>..</table> </span>

        <span id="more"> <pre>{{ x|json:4 }}</pre> </span>

        <button onclick="myFunction()" id="myBtn">Read more</button>

    </div>

</uib-accordion>

<script type="text/javascript">

    function myFunction() {

        var dots = document.getElementById("dots");

        var moreText = document.getElementById("more");

        var btnText = document.getElementById("myBtn");

        if (dots.style.display === "none") {

            dots.style.display = "inline";

            btnText.innerHTML = "Read more";

            moreText.style.display = "none";

        } else {

            dots.style.display = "none";

            btnText.innerHTML = "Read less";

            moreText.style.display = "inline";

        }

}

</script>

我怎么能不使用Javascript来满足我的需求呢？我想实现一种更 Angular 的方式，我是 Angular 的新手，请注意我的简洁。提前致谢。

Answer 1

您可以直接从 Angular 获得一些选择。核心原则是使用组件中的变量并检查它以及在模板中进行更新。第一个解决方案，模板：<div uib-accordion-group class="mt-1" ng-repeat="x in data.details" heading="{{data.displayName}}">&nbsp; &nbsp; <span id="dots" [hidden]="! showTable"> <table>..</table> </span>&nbsp; &nbsp; <span id="more" [hidden]="showTable"> <pre>{{ x|json:4 }}</pre> </span>&nbsp; &nbsp; <button (click)="toggleTableVisibility()" id="myBtn">Read more</button></div>并且在组件中showTable = true;function toggleTableVisibility() {&nbsp; &nbsp; this.showTable = ! this.showTable;}第二种解决方案，使用ngIf，仅模板发生变化<div uib-accordion-group class="mt-1" ng-repeat="x in data.details" heading="{{data.displayName}}">&nbsp; &nbsp; <span id="dots" *ngIf="showTable"> <table>..</table> </span>&nbsp; &nbsp; <span id="more" *ngIf="! showTable"> <pre>{{ x|json:4 }}</pre> </span>&nbsp; &nbsp; <button (click)="toggleTableVisibility()" id="myBtn">Read more</button></div>我没有对此进行测试，因此可能存在拼写错误/解析错误，但这就是要点。两者之间的区别在于 with[hidden]内容被隐藏display: none，而 withngIf内容只是从 DOM 中删除。编辑：修改我的答案以反映添加切换按钮的问题的更新。