javascript - AngularJS:将 HTML 代码显示到 ng-view 及其结果中(以导航形式,如 Html、Css、JS、Result)

标签 javascript html css angularjs

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

对于exp-

(1) html1、css1、js1、结果1

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

现在我想要实现的是-

在 screen-1 上,如果单击按钮 1,它应该启动带有事件选项卡“HTML”的 screen-2,并且它应该显示文件“html1”的代码,类似地它也应该显示代码以及其他选项卡的结果。

也许下图可以解释上面的场景。

enter image description here

最佳答案

你可以看看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>

希望这有帮助!

关于javascript - AngularJS:将 HTML 代码显示到 ng-view 及其结果中(以导航形式,如 Html、Css、JS、Result),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39145708/

相关文章:

javascript - jQuery Datatables 和 ColumnFilterWidget 集成问题

html - z-index 对多个元素没有按预期工作

html - 导航栏中的 Bootstrap 4 导航丸

html - css 选择器中的疑问 > [#id (.class1 or .class2)]

javascript - 有没有办法在循环中对我的 javascript 函数进行编号?

javascript - 如何解决这个 Angular $scope 问题?

javascript - 这是我调整 iframe 大小并需要一些编辑的 javascript

javascript - 当我添加新文本字段时,文本字段会重置

javascript - 为什么没有操作的表单标签会重新加载页面?

javascript - Slick JS 不显示点