本文介绍了AngularJS点击添加样式、点击变色设置的实例代码，分享给大家，具体如下：首先解释需求是这样的，有个列表，当你点击哪一行时，哪一行背景变成灰色，在JQ中，大家都知道，这是非常容易的，加一个addClass就行了，那么AngularJS如何实现呢？下面我们看代码部分 <!doctype html> <html ng-app="a2_11"> <head><title>添加元素样式</title><script src="../Script/angular.min.js"type="text/javascript"></script> <style ...
需要用到的js angular.js（用angular.min.js会导致分页控件不显示） ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由，所以讲js以及css文件的应用都放在一个主html，请同学们在html页面中添加以上文件 在开始之前，我先简单介绍下分页的原理。 分页的实质其实就是一条sql语句， 比如查找第二页，即第16到第30条数据 在MySQL中是select * from table limit 15,15 order by ...
随着HTML5的普及，现在大部分浏览器都支持拖拽功能，今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs)。一、首先前端这款插件是基于AngularJS的，下面我们来看主要代码。引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script> <script src="js/ng-file-upload.min.js"></script>html: <div class="block__list block__list_words" ng-controller="UploadC...
html :样式采用了sui框架的样式，请自行引入查看,AngularJS,自己引入， <div ng-controller="forGetPassword" ng-app="routingDemoApp"><form novalidate name="forget"><header class="bar bar-nav"><a href="javascript:history.go(-1);" rel="external nofollow" class="ui-header-btn ui-header-btn-sm"></a><h1 class=title>忘记密码</h1></header><div class="gorgetpassowrd"><ul><li><input type="number" placeholder="请...
父到子组件之间的数据传递 父组件模板中引用子组件// father template： ...<child-item [name] = "fatherItemName" > </child-item>//...` 其中”fatherItemName” 为父组件中的属性，[name] 为子组件的输入 在子组件中使用 @Input() name 来接受父组件传递的值 如果在接收值前需要进行一些处理，可以使用setter 拦截输入属性 _name: string = ;@Input()set nameStr(name: string){_name = "father name:" + name;}这时的 _name 作...
最近在项目中折腾了下angular2,所以出来跟大家分享，希望有帮助，每个公司业务不一样，按实际情况而定，个人学习心得，不作为标准。 1、定义http-interceptor.service.ts服务，统一处理http请求 /*** name:http服务* describe:对http请求做统一处理* author:Angular那些事 * date:2017/6/3* time:11:29*/ import {Injectable} from @angular/core; import {Http, Response} from @angular/http; import rxjs/add/operator/toP...
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义，通常来讲，组件之间的交互方式主要有如下几种： 使用输入型绑定，把数据从父组件传到子组件通过 setter 拦截输入属性值的变化使用 ngOnChanges 拦截输入属性值的变化父组件监听子组件的事件父组件与子组件通过本地变量互动父组件调用 ViewChild父组件和子组...
什么情况下会需要动态绑定 ng-model 呢？若你的数据结构长得像是下面这样： var Classes = [ { "Name" : "温度 " , "Options" : [ "Cold" , "Hot" , "Normal" ]}, { "Name" : "份量 " , "Options" : [ "Big" , "Middle" , "Small" ]} ];此时你需要用 ng-repeat 将数据展开，并且将 Options 个别设置为 ng-options 的数据，此时就须要动态去绑定 ng-model，那么该如何绑呢？你可能需要在你的 Controller 底下加上一个变量来做这些动...
目前在做一个java web页面，没有使用到框架的分页，所以需要自己实现分页，就想到了用angularjs来实现分页，数据通过ajax从后台获取。 插件 百度了一下，看到一个比较漂亮的插件，就直接用该插件，并修改了部分细节，使得适合我的项目，该插件地址是：（https://github.com/miaoyaoyao/AngularJs-UI）效果图使用方法 1、在网页的头部引入angularjs、bootstarp以及该插件，该分页插件主要是ng-pagination.css以及ng-pagination.js<l...
这两天一直纠结angular的图片懒加载插件中无法自拔。在使用过程深深感到js学艺不精的痛苦，想修改源码又不会修改，只能尽力压榨如何使用插件上。这里主要谈谈在使用插件的过程遇到的一些问题。 一）我使用的是angular-imglazyload这个插件。【https://www.npmjs.com/package/angular-imglazyload】主要是这个插件小不依赖jquery库，然后下载源码运行成功后，我就整合到自己项目上运行，结果发现竟然只有前2张加载了，滚动了都没有...
最近在做报表的项目，有一种情况是后台返回给我的是一个二维数组，在前台将数据放入到表格中，因为我们用的是AngularJS的前台框架，所以利用ng-repeat来实现：首先在js中：代码如下: $scope.Week = [[ 云南省 , a, s, d, e, w,t ],[ 陕西省 , l, p, o, i, u,y ],[ 青海省 , 1, 2, 4, 4, 5, 6 ] ];在HTML中：样式一：<ul ng-repeat="a in Week"> <ul ng-repeat="b in a track by $index"> <li><b style="color: green">{{b}}</b></l...
服务端(nodeJs/express): let app = require(express)(); let http = require(http).Server(app); let io = require(socket.io)(http);io.on(connection, (socket) => {console.log(user connected);socket.on(disconnect, function(){console.log(user disconnected);});socket.on(add-message, (message) => {io.emit(message, {type:new-message, text: message}); }); });http.listen(5000, () => {console.log(started on po...
1.引入$modal模块如：angular.module(ModalCtrl,[$modal ,$scope , function($modal ,$scope ){ }]); 2.执行调模态框 函数 $scope.editModule = function(type, size, id) { $scope.id = id; var modalInstance = $modal.open({ templateUrl: tpl/weichat_modulebaseinfo.html, //template:html元素模板, controller: EditModuleCtrl, // 初始化模态范围 size: size, //大小配置 scope: 一个作用域为模态的内容使用（$modal会创建一...
修改密码逻辑思维 首先要输入旧的密码，判断旧的密码是否正确（后台判断） 其次输入新的密码，判断新密码格式（可增加） 最后判断新密码和确认密码输入是否一致 html部分 <form class="form-horizontal" role="form"><div class="form-group"><label class="col-sm-2 control-label"><i class="importance">*</i>当前密码</label><div class="col-sm-6"><input type="text" class="form-control" ng-model="user.password"></div><...
在页面中我们常常会遇到多选框，例如购物车里的商品下面用angular来实现这一功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head> <body ng-app="select" ng-controller="moreSel"> 全选: <input type="checkbox" ng-checked="checks" ng-click="checks = !checks; all(checks)"> <!--track by $index去掉也可以--> <div ng-repeat="it...