什么情况下会需要动态绑定 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...
本文实例讲述了基于AngularJS实现的工资计算器。分享给大家供大家参考，具体如下： 先看界面：其实在ng中最让人印象深刻的就是数据的双向绑定，在html中就完成了很多操作。大概用到的就是控制器视图服务等，没有分模块写控制器，代码如下： <html ng-app = "myApp"> <head><title>工资计算器ng</title><script src= "angular.js"></script> </head> <body><div ng-controller = "MyController">税前工资：<input ng-model="salary....
方法一：点击后，让button的状态变为disable js指令： .directive(clickAndDisable, function() {return {scope: {clickAndDisable: &},link: function(scope, iElement, iAttrs) {iElement.bind(click, function() {iElement.prop(disabled,true);scope.clickAndDisable().finally(function() {iElement.prop(disabled,false);})});}};})html:代码如下: <button type="button" class="btn btn-info btn-bordered waves-effect w-m...
这两天一直纠结angular的图片懒加载插件中无法自拔。在使用过程深深感到js学艺不精的痛苦，想修改源码又不会修改，只能尽力压榨如何使用插件上。这里主要谈谈在使用插件的过程遇到的一些问题。 一）我使用的是angular-imglazyload这个插件。【https://www.npmjs.com/package/angular-imglazyload】主要是这个插件小不依赖jquery库，然后下载源码运行成功后，我就整合到自己项目上运行，结果发现竟然只有前2张加载了，滚动了都没有...
之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载的资料.方案如下: 项目的主结构如下图:1.index.html是最外层的页面,页面代码如下: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>require angularjs</title></head><body><a href="#module1" rel="external nofollow" >module1</a><br/><...
最近在做报表的项目，有一种情况是后台返回给我的是一个二维数组，在前台将数据放入到表格中，因为我们用的是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...
整理文档，搜刮出一个angularJs使用$watch和$filter过滤器制作搜索筛选，稍微整理精简一下做下分享。<div ng-app="module" ng-controller="ctrl">搜索: <input type="text" ng-model="search"><table border="1" width="600"><tr><td>编号</td><td>点击数</td><td>标题</td></tr><tr ng-repeat="(k,v) in lists"><td>{{v.id}}</td><td>{{v.click}}</td><td>{{v.title}}</td></tr></table> </div> <script>var m = angular.module(m...
以下获取与修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 为例 【一】获取 (不修改URL) //1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 //2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $location.url(); // 结果：/homePage?id=10&a=100 //3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) var p...
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会创建一...
在AngularJS中使用模态框需要引用的文件： angular.js 1.5.5ui.bootstrap-tpls.js 0.11.2bootstrap.css 3.3.7需要注意版本要一致，高版本的不支持这种方法，会出错将需要弹出的模态框的内容写在 script 标签中，指明属性，放在页面中<script type="text/ng-template" id="modal.html"> <div><div class="modal-header"><h3 class="modal-title" align="center">标题信息</h3></div><div class="modal-body"><div align="center">模...
一、问题的来源 我们都知道向后台传参可以使用get、put，其形式就类似于name=jyy&id=001。但是在ng中我却发现使用$http post进行异步传输的过程中后台是接收不到数据的。其实这个问题是因为请求头的缘故。在ng中默认的请求头是：“Content-Type":"application/json"，也就是说传递参数是使用的就是json格式。但是后台默认的却是Content-Type: application/x-www-form-urlencoded。因此在这样的情况下后台接收到的数据就会是空的。 ...
修改密码逻辑思维 首先要输入旧的密码，判断旧的密码是否正确（后台判断） 其次输入新的密码，判断新密码格式（可增加） 最后判断新密码和确认密码输入是否一致 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...