AngularJS：在 ng-view 中显示 HTML 代码及其结果（以导航形式，如 Html、Css、JS、Result）答案

【问题标题】：AngularJS: Display HTML code into ng-view as well as its result (in Navigation form like- Html, Css, JS, Result)AngularJS：在 ng-view 中显示 HTML 代码及其结果（以导航形式，如 Html、Css、JS、Result）
【发布时间】：2017-01-01 21:51:59
【问题描述】：

我正在开发一个网络应用程序。我有一个屏幕 1，它有一个按钮列表（带有标签“代码”）。单击这些按钮中的任何一个时，都会在 ng-view 中加载不同的 HTML screen-2（所有按钮通用）（使用 $location.path('path')）。屏幕 2 有一个带有四个选项卡的导航栏（“HTML”、“CSS”、“JS”和“RESULT”，如图所示）。我还有一个 HTML 文件列表。

用于实验-

(1) html1、css1、js1、result1

(2)html2、css2、js2、result2等。

现在我想要实现的是-

在屏幕 1 如果单击按钮 1，它应该启动屏幕 2 并带有活动选项卡“HTML”，它应该显示文件“html1”的代码，同样它也应该显示代码以及其他选项卡的结果。

大概下面这张图就可以解释上面的场景了。

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

您可以查看angularJS ng-show 和 ng-hide 功能。实现轻量级的显示和隐藏应用。您可以在ng-show 中设置选项。一个小例子如下所示：

More info

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

Show HTML: <input type="checkbox" ng-model="myVar">

<div ng-show="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>

</body>
</html>

希望这会有所帮助！

【讨论】：