对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示。页面展示效果：页面HTML代码： <table class="table table-striped" style="margin: 0px;"> <thead> <tr> <td>选择</td> <td>企业名称</td> <td>企业地址</td> <td>状态</td> </tr> </thead> <tbody> <tr ng-repeat="l in list"> <td><input ty...
在用angular依赖注入时，感觉很好用，他的出现是 为了“削减计算机程序的耦合问题” ，我怀着敬畏与好奇的心情，轻轻的走进了angular源码，看看他到底是怎么实现的，我也想写个这么牛逼的功能。于是就模仿着写了一个，如果有什么不对，请大家批评指正。 其实刚开始的时候我也不知道怎么下手，源码中有些确实晦涩难懂，到现在我也没有看明白，于是我就静下心想一想，他是怎么用的，如下所示： angular.module(/*省略*/).factor...
前言 相信大家在做项目里经常需要登录注册，那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。 Angular下载地址：https://code.angularjs.org/1.5.0/angular.js 首先看一下页面效果（通过bootstrap实现的布局样式）： 当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对angular进一步深入理...
本文实例讲述了AngularJS基于ui-route实现深层路由的方法。分享给大家供大家参考，具体如下： 1.前面我们通过了简单的ng-route实现了简单层次的路由，对于深层次的路由，我们可以通过ui-route来实现。 （1）ng-route的局限性：一个页面无法嵌套多个视图，也就是说一个页面只能有包含一个页面一个控制器的切换。 （2）ui-route的改进：在具有富客户端的单页应用中，要在一个页面中呈现不同的视图，我们可以通过ui-route实现路由的嵌...
本文实例讲述了AngularJS通过ng-route实现基本的路由功能。分享给大家供大家参考，具体如下： 为什么需要前端路由~ （1）AJAX不会留下History历史记录 （2）用户无法通过URL进入应用指定的页面（书签或者分享等） （3）AJAX对于SEO是一个灾难 1.一般情况下，我们访问网页的时候，是通过url地址。 比如我们访问一个网页:https://www.baidu.com/index/fix.html 在AngularJS中通过“#”来进行不同页面的路由，比如： https://www.baid...
本文实例讲述了AngularJS使用ng-repeat和ng-if实现数据的删选显示效果。分享给大家供大家参考，具体如下： 1.首先重复回顾一下ng-repeat指令 ng-repeat可以实现内容的重复显示，比如我们可以写如下代码 <script>angular.module("myapp",[]).controller("mycontroller",function($scope){$scope.data=[{name:"yu1",age:10,partment:"产品部"},{name:"yu2",age:11,partment:"产品部"},{name:"yu3",age:12,partment:"事业部"},{name:"...
本文实例讲述了AngularJS实现用户登录状态判断的方法。分享给大家供大家参考，具体如下： 使用AngularJS的单页面应用时，由于是本地路由在控制页面跳转，但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。 angularjs是mvc架构所以实现起来很容易也很灵活，我们只MainController里增加一个路由事件侦听并判断，这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了 代码中的 $rootScope.user是登录后把用...
前言 利用H5项目第一版本已经上线，话说有了第一期就有了第二期，这不要为第二期做准备了，老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能，好吧我表示没怎么接触过，这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉，于是乎就有了这篇文章的产生。其实没我什么事，我也是主动请缨说交给我，因为年底了嘛，也没什么事，不急不忙的，一天也乐得清闲，还不给自己找点事做...
废话不多说了，直接给大家贴代码了。 $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute", method: Post, headers: { Content-Type: multipart/form-data }, data: { BusRoute: file, ConferenceID: "1" }, transformRequest: function (data, headersGetter) {//进行格式转换，非常关键 var formData = new FormData();//将model转为表单格式 angular.forEach(data, function (value, key) {...
我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值.访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会...
本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能。分享给大家供大家参考，具体如下： DOM元素的显示与隐藏 ，是前端开发中常常会用到的功能，AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean。 【HTML代码】 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>angularj...
研究了一上午，终于做出了，实时获取本地localStorage来模拟注册登入~~~ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>我们虽然很穷，但是我们有梦想</title> <script src="angular.js"></script> </head> <body ng-app="zcsApp" ng-controller="zcsControl"> 用 户 名：<input type="text" ng-model="name" /><br> 密 码：<input type="text" ng-model="pwd" /><br> 确认密码：<input type="text" ng...
最近一个项目中需要实现多文件上传与管理，而项目是基于bootstrap开发的，所以查了一些bootstrap文件上传插件，最后发现还是bootstrap-fileinput最美观，该插件可以实现多文件的上传与管理（插件官方地址：http://plugins.krajee.com/file-input），具体的效果如下： （bootstrap-fileinput不局限于图片上传，也可以实现文件上传，但图片的缩略图容易辨识，这里就以图片上传为例） 该插件基本的操作可以参考：JS文件上传神器boo...
本文实例讲述了AngularJS递归指令实现Tree View效果的方法。分享给大家供大家参考，具体如下： 在层次数据结构展示中，树是一种极其常见的展现方式。比如系统中目录结构、企业组织结构、电子商务产品分类都是常见的树形结构数据。 这里我们采用Angular的方式来实现这类常见的tree view结构。 首先我们定义数据结构，采用以children属性来挂接子节点方式来展现树层次结构，示例如下： [{"id":"1","pid":"0","name":"家用电器","chil...
本文实例讲述了AngularJS自定义插件实现网站用户引导功能。分享给大家供大家参考，具体如下： 最近由于项目进行了较大的改版，为了让用户能够适应这次新的改版，因此在系统中引入了“用户引导”功能，对于初次进入系统的用户一些简单的使用培训training。对于大多数网站来说，这是一个很常见的功能。所以在开发这个任务之前，博主尝试将其抽象化，独立于现有系统的业务逻辑，将其封装为一个通用的插件，使得代码更容易扩展和维护。...