我正在开发一个网络应用程序。我有一个 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”的代码,类似地它也应该显示代码以及其他选项卡的结果。
也许下图可以解释上面的场景。
最佳答案
你可以看看angularJS
ng-show 和 ng-hide 功能。实现轻量级的显示和隐藏应用程序。您可以在 ng-show
中设置选项。一个小例子如下所示:
<!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/