Angular.js中ng-include的用法及多标签页面的实现

序

在平时的项目开发中，应该经常满足上图所示的需求，即一个页面上有多个标签，选中的标签颜色会高亮显示，不同的标签会相应切换显示不同的内容。如果内容代码太多，写在同一个html文件里会特别乱，所以这里我们最好把页面代码分开管理，控制器可以分开管理，这样会清楚很多。

这里，我们需要在Angularjs中使用ng-include指令。我们来看看详细的介绍：

一、多个标签的准备

首先，您需要了解需求：

1.一次只能选择一个标签

2.所选标签的背景颜色和自身颜色将会改变。

第一个需求可以用一个flag变量来控制，就是一个是flag，一个是flag！旗帜.而第二个需求可以用ng-class指令完成，两种风格的类可以提前写好，用ng-class判断什么时候显示哪种风格。

在这里，我已经把所有的逻辑代码都写在了HTML页面上。首先在页面初始化时，使用ng-init指令初始化一个标志变量，使用ng-class绑定不同的样式，然后使用ng-click事件动态改变标志。

代码如下：

ion-view ng-init=' test=true ' div class=' bar bar bar-header bar-royal ' div class=' title ' test/div/div class=' bar bar bar-sub coder ' div class=' button-bar ' a class=' button ' ng-class=' test？button-positive ' : ' ' ' ng-click=' test=true ' button 1/a a class=' button ' ng-class='！测试？按钮-正' :''' ng-click=' test=false '按钮2/a/div/div离子-内容类=' has-subcode '/离子-内容/离子-视图二。Ng-Include的使用

多标签按钮已经写好，需要为点击的按钮显示相应的页面内容。这里，ng-include用于管理代码。如下所示：

ion-content class=' has-subcode ' div ng-show=' test ' ng-include=' template/template 1 . html ' '这里写的东西都不会显示，完全被ng-include/div ng-show='代替！test ' ng-include=' ' template/template 2 . html ' '/div/ion-content在这里，我用的是ng-show，也就是页面加载的时候，所有的内容都被加载，可以起到预加载的效果。当然，如果需要点击相应的按钮，然后显示相应的内容，可以使用ng-if，也有同样的效果。

对应于html文件的url地址写在ng-include之后，这是相对于index.html的地址。

看看模板1的代码：

div ng-controller=' template1 controller ' div class=' row ' div class=' coltext-center ' ng-repeat=' x在测试中' {x.name}}/div/div/div I将template 1作为单独的控制器进行管理，Ctrl代码为：

angular.module('includeExample '，[' ion '])。控制器(' template1Controller '，['$scope '，函数($ scope){ $ scope . tests=[{ name : ' test1 ' }，{ name: 'test2' }，{ name : ' test3 ' }])；至此，Ng-Include的用法大概结束了。我认为它在项目开发中仍然有用。分开管理逻辑和页面会更清晰，一定程度上提高开发效率。

效果是：

摘要

以上就是本文的全部内容。希望这篇文章的内容对大家学习或者使用Angular.js有帮助，有问题可以留言交流。谢谢你的支持。