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


Posted in Javascript onMay 07, 2017

前言

大家在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容。如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多。

这里就要使用到Angularjs中个ng-include指令。下面来看看详细的介绍:

一、多标签的编写

首先需要了解需求:

      1.同时只能选中一个标签

     2.被选中的标签背景色以及自体颜色都将改变。

第一个需求我们可以使用一个flag变量来控制,即一个是flag另一个则是!flag。而第二个需求则可以使用ng-class指令来完成,提前把两个样式的class写好,通过ng-class来判断何时显示何种样式即可。

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

代码如下:

<ion-view ng-init="test=true">
 <div class="bar bar-header bar-royal">
 <div class="title">Test</div>
 </div>
 <div class="bar bar-subheader">
 <div class="button-bar">
  <a class="button" ng-class="test?'button-positive':''" ng-click="test=true">button1</a>
  <a class="button" ng-class="!test?'button-positive':''" ng-click="test=false">button2</a>
 </div>
 </div>
 <ion-content class="has-subheader">
  </ion-content>
</ion-view>

二、Ng-Include的使用

多标签button编写好了,需要对点击的button展示对应的页面内容,这里使用ng-include来管理代码。如下:

<ion-content class="has-subheader">
 <div ng-show="test" ng-include="'template/template1.html'">这里不管写什么都不会展示,完全被ng-include取代</div>
 <div ng-show="!test" ng-include="'template/template2.html'"></div>
</ion-content>

这里我使用的是ng-show,即在页面加载的时候就把全部的内容加载完毕了,可以起到一个预加载的效果,当然,如果需要点击对应button的时候再展示相应的内容则可以使用ng-if,效果一样。

ng-include后面写的是html文件对应的url地址,是相对于index.html的地址。

来看一下template1的代码:

<div ng-controller="template1Controller">
 <div class="row">
 <div class="col text-center" ng-repeat="x in tests">{{x.name}}</div>
 </div>
</div>

我对template1进行了单独的controller管理,Ctrl代码为:

angular.module('includeExample', ['ionic'])
 .controller('template1Controller', ['$scope', function ($scope) {
 $scope.tests = [
  {
  name: 'test1'
  }, {
  name: 'test2'
  }, {
  name: 'test3'
  }
 ]
 }]);

到这,Ng-Include的用法大概就说完了,我觉得在项目的开发中还是比较有用的,分开管理逻辑和页面都会比较清晰,也会在一定程度上提高开发效率。

效果为:

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
       

Javascript 相关文章推荐
JS求平均值的小例子
Nov 29 Javascript
javascript打开word文档的方法
Apr 16 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jQuery 选择器详解
Jan 19 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
解析vue中的$mount
Dec 21 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
JavaScript的继承实现小结
May 07 #Javascript
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
AngularJS封装$http.post()实例详解
May 06 #Javascript
JavaScript瀑布流布局实现代码
May 06 #Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
You might like
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
vue数字类型过滤器的示例代码
2017/09/07 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python计算文本文件行数的方法
2015/07/06 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python实现按中文排序的方法示例
2018/04/25 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python实现多线程端口扫描
2019/08/31 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
2014年国培研修感言
2014/03/09 职场文书
师德师风剖析材料
2014/09/30 职场文书
学习保证书怎么写
2015/02/26 职场文书
初三化学教学反思
2016/02/22 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB