很简单的需求：之前下拉框是单选，现在想改为多选。 开发过程： 问题一：自己首先想到的是网上找个example，发现貌似AngularJS有相应的js包来实现，其中最多的就是isteven-multi-select和angularjs-dropdown-multiselect等。 我下载了，但是套到自己项目里面，是在是难看的很。而且貌似这些js包耦合性很高，不是我想要的那种，所以还是打算用简单的md-select、md-option、md-checkbox 来实现我想要的效果，又不想写的太人工，所以就...
常用的表单验证指令如下详情： 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： <input type="text" required />2. 最小长度 验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"： <input type="text" ng-minlength="5" />3. 最大长度 验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"： <input type=...
首先我们来看看示例代码 <body ng-app="app"><div ng-controller="CopyController"><div>data: <input ng-model="user.data" /><br>user.data: {{user.data}} <br>user1.data: {{user1.data}} <br><button ng-click="changeData1()">change</button> <br><button ng-click="copy()">copy</button> <br>copyData: {{copyUser.data}}</div></div><script src="node_modules/angular/angular.min.js"></script> </body> <script>angul...
下面一段代码给大家介绍了angularjs手动解析表达式($parse)，具体代码如下所示： <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>手动解析表达式（$parse）</title> <link rel="stylesheet" href="../bootstrap.min.js"> </head> <body ng-controller="myController"> <div ng-controller="myController"> <input type="text" ng-model="expr" placeholder="enter an expression"> <h2>{...
1、问题背景 给定一个数组对象，里面是div的id；循环生成div元素，并给id赋值 2、实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS动态生成div的ID</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("idApp",[]); app.controller("idCon",function($scope){ $scope.divIds = [ {divId:"chartId1"}, {d...
<Chart bgColor=FFFFFF upperLimit=120 lowerLimit=0 baseFontColor=666666 majorTMNumber=10 majorTMColor=666666 majorTMHeight=8 minorTMNumber=5 minorTMColor=666666 minorTMHeight=3 pivotRadius=10 showGaugeBorder=0 gaugeOuterRadius=100 gaugeInnerRadius=90 gaugeOriginX=170 gaugeOriginY=170 gaugeScaleAngle=220 displayValueDistance=20 placeValuesInside=1 gaugeFillMix= pivotFillMix={F0EFEA}, {BEBCB0} pivotB...
简介 在ng的生态中scope处于一个核心的地位，ng对外宣称的双向绑定的底层其实就是scope实现的，本章主要对scope的watch机制、继承性以及事件的实现作下分析。 监听 1. $watch 1.1 使用 // $watch: function(watchExp, listener, objectEquality) var unwatch = $scope.$watch('aa', function () {}, isEqual);使用过angular的会经常这上面这样的代码，俗称“手动”添加监听，其他的一些都是通过插值或者directive自动地添加监听，但...
简介 injector是用来做参数自动注入的，例如 function fn ($http, $scope, aService) { } ng在运行时会把$http, $scope, aService 自动作为参数传入进行执行。 其实很容易想明白，injector做了两件事 缓存那些service，以后作为参数注入分析参数列表，找到需要的参数注入下面源码分析如何实现上面两件事情。 结构 createInjector -> createInternalInjector return: instanceInjector所以 createInjector() 返回的是 instanceInje...
$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。而为了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么，以及在日常的编码中如何应用它们。1、探索$apply()和$digest()1.1、认识双向数据绑定和$watch();AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding)，这个特性大大简化了我们的代码编写方式。数据绑定...
现在的前端项目中基本上都会用到angularjs框架，之前并不了解这个框架，也是因为最近接手的项目，所以打算好好的学习下它。之前都是搞pc端，现在接手的是移动端的项目，移动端UI框架用的是ionic＋vordova，没有用bootstrap，主要做的是ios+安卓的app界面，ionic这个框架也不太了解，也需要花时间好好熟悉下。angularjs学习小白一枚，欢迎大神指正。AngularJs是什么？简单来说，即javascript的一个框架，通过script标签添加到网页中...
说到AngularJS，我们首先想到的大概也就是双向数据绑定和指令系统了，这两者也是AngularJS中最为吸引人的地方。双向数据绑定呢，感觉没什么好说的，那么今天我们就来简单的讨论下AngularJS这个框架的指令系统，本人也是初学，查阅了一些资料，要是有一些说的不好的地方，万望指出。 指令作为AngularJS中最为重要的部分，所以这个框架本身也是自带了比较多的的指令，但是在开发中，这些指令通常不能满足我们的需要，所以我们也是需要...
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍： $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下：$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己，直至根作用域。格式如下：$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据。格式如下：$on(event,data) 上述说明中...
$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中.$scope是一个把view（一个DOM元素）连结到controller上的对象。在我们的MVC结构...
我们知道，AngularJS并没有自带立等可用的数据建模方案。而是以相当抽象的方式，让我们在controller中使用JSON数据作为模型。但是随着时间的推移和项目的成长，我意识到这种建模的方式不再能满足我们项目的需求。在这篇文章中我会介绍在我的AngularJS应用中处理数据建模的方式。 为Controller定义模型 让我们从一个简单的例子开始。我想要显示一个书本(book)的页面。下面是控制器(Controller)： BookController app.controller(Boo...
ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html()。这篇文章主要给大家深入的介绍了AngularJS中ng-bind-html指令 的相关资料,需要的朋友可以参考下。前言在为html标签绑定数据的时，如果绑定的内容是纯文本，你可以使用{{}}或者ng-bind。但在为html标签绑定带html标签的内容的时候，angularjs为了安全考虑，不会将...