本文实例讲述了Angular实现的进度条功能。分享给大家供大家参考，具体如下： 项目里需要一个进度条，所以就在网上查找资料学习，看到了网友“雪狼”的代码分享，写的很高明，很精练，很厉害，原文中的代码如下： HTML部分： <div ng-class="{progress: true, progress-striped: vm.striped}"><div ng-class="[progress-bar, vm.style]" ng-style="{width: vm.value + %}"><div ng-if="vm.showLabel">{{vm.value}}%</div></div> </d...
本文实例讲述了AngularJS基于http请求实现下载php生成的excel文件功能。分享给大家供大家参考，具体如下： 使用PHPExcel插件的同学们都知道，导出excel是直接将生成内容修改content-type来将内容作为文件下载的，这时候需要页面上有一个url，通过点击来下载。 那么问题来了，如果在生成excel时有请求参数，只能通过js的http请求，这时候怎么下载呢？ 研究了一下，有以下几种方式： 1. angularjs创建a标签模拟下载 // 创建a标签模拟...
闲来无事，写一个简单的angular的搜索框。 1.要求： 利用 AngularJS 框架实现手机产品搜索功能，题目要求： 1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上 2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分” 3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中 4）搜索条件具体要求： 搜索框（匹配操作系统、产品名、产商进行模糊查询） 价格区间（开始价格~结束价格） 2.需求...
本文实例讲述了AngularJS实现的锚点楼层跳转功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html ng-app="myApp"><head><meta charset="UTF-8"><title>anchor</title><style>#wei div{width:100%;height:720px;background: red;color:#fff;text-align:center;line-height: 720px;margin:20px;font-size: 80px;}#wei ul{position: fixed;top:300px;right:60px;}#wei ul li{width:20px;display:block;height:20px;backgro...
本文实例讲述了AngularJS实现的简单拖拽功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html ng-app="myApp"><head><meta charset="UTF-8"><title>www.gxlcms.com AngularJS拖拽</title><style>*{padding:0;margin:0;}.wei{width:100px;height:100px;background: red;position:absolute;cursor: pointer;/*left:0;top:0;*/}</style></head><body ng-controller="show"><div class="wei" wei-yi data="true"></div><div ...
本文实例讲述了AngularJS实现的2048小游戏功能。分享给大家供大家参考，具体如下： 先来看看运行效果图：具体代码如下： index.html： <!DOCTYPE html> <html> <head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="2048.css" rel="external nofollow" ><script src="angular.min.js"></script><!-- 1.4.6--><script src="angular-animate.min.js"></script> </head> <body ng-app="myApp" ng-controller="m...
本文实例为大家分享了angularjs实现分页和搜索展示的具体代码，供大家参考，具体内容如下 话不多说,上代码<html class="no-js" ng-app="myApp"> <body ng-controller="mainController"> <table class="am-table am-table-striped am-table-hover table-main"> <thead> <tr> <th>name</th> </tr> </thead> <tbody> <tr ng-repeat="item in houses | limitTo:listsPerPage"> <td>{{item.c}}</td> </tr> </tbody> </tabl...
本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考，具体如下： 前两天研究了一下angularjs，不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。 写了个搜索下拉框的demo，注释在里边都写了，就不再这罗嗦了。 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"> <title>www.gxlcms.com Angular模糊匹配</title> <script src="http://apps....
本文实例讲述了Angular实现点击按钮控制隐藏和显示功能。分享给大家供大家参考，具体如下： 先来看看运行效果：具体代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com Angular显示隐藏</title><style>.box{width: 100px;height: 100px;background: red;}</style><script src="angular.min.js"></script><script>var myapp=angular.module("myapp",[]);myapp.controller("myCtrl",fu...
本文实例讲述了Angular实现的敏感文字自动过滤与提示功能。分享给大家供大家参考，具体如下： 先来看看运行效果：具体代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com angular敏感文字自动过滤</title><script src="angular.min.js"></script><script>var myapp=angular.module("myapp",[]);myapp.filter("filter1",function () {return function (msg,flag) {return msg.replace...
本文实例讲述了Angular实现的内置过滤器orderBy排序与模糊查询功能。分享给大家供大家参考，具体如下： 先来看看运行效果：具体代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com Angular模糊查询、排序</title><style>*{margin: 0;padding: 0;}table{margin: 100px auto;border-collapse: collapse;}th,td{padding: 10px;border: 1px solid #000;}</style><script src="angular.mi...
本文实例讲述了Angular实现的日程表功能。分享给大家供大家参考，具体如下： 先来看看运行效果：具体代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com Angular日程表</title><style>table{border-collapse: collapse;}td{padding: 10px;border: 1px solid #000;}</style><script src="angular.min.js"></script><script>/*1、基本布局2、准备模拟数据*/// 模拟数据var data = {use...
本文实例讲述了Angular实现的简单查询天气预报功能。分享给大家供大家参考，具体如下： 先来看看运行效果：具体代码如下： <!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="siteCtrl"> <div ><input type="text" ng-model="city2" value="beijing"><button ng-click="check()">btn</button><p>未来3天的天气情况</p>?<ul ng-show="toggl...
本文实例讲述了Angular实现的自定义模糊查询、排序及三角箭头标注功能。分享给大家供大家参考，具体如下： 先来看看运行效果：具体代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com Angular模糊查询、排序</title><style>*{margin: 0;padding: 0;}table{border-collapse: collapse;}td{padding: 10px;border: 1px solid #000;}.top{display: inline-block;width: 0;height: 0;bord...
本文实例讲述了Angular实现的简单定时器功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com Angular定时器</title><script src="angular.min.js"></script><script>var myapp=angular.module("myapp",[]);myapp.controller("myCtrl",function ($scope,$interval,$timeout) {$scope.num=0;$scope.fun=function () { // $interval(function () { /...