angularJS
sanlingwu
这个作者很懒,什么都没留下…
展开
-
angularJS四大特性
1、mvcindex.html {{data.message + " world"}} main.jsfunction MyFirstCtrl($scope){ $scope.data = {message: "Hello"};//模型}2、模转载 2017-10-18 12:37:34 · 1626 阅读 · 0 评论 -
使用ui-router的登录实现方法
简单的实现方法,没有校验,直接跳转。登录ui-sref是ui-router中带的属性。booklist也是一个路由,是一个状态,在app.js中对其进行定义:routerApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/index'); $st转载 2018-02-05 12:14:17 · 213 阅读 · 0 评论 -
angularjs自定义指令---以expander和accordion为例
1、expander {{text}} var expanderModule=angular.module('expanderModule', []);expanderModule.directive('expander', function() { return { restrict : 'EA', replace : true, transclude : t转载 2018-01-27 18:16:21 · 193 阅读 · 0 评论 -
$filter服务
$filter是用来进行数据格式化的专用服务,angular中内置了8个filter:currency(格式化货币), date(格式化日期), json(json格式化), limitTo, lowercase(小写), number(数值), orderBy(排序), uppercase(大写) {{ 1304375948024 | date }}转载 2018-02-01 12:04:38 · 147 阅读 · 0 评论 -
angularjs中service
当两个或几个controller中有重复的代码时,需要将其抽成一个服务,即service。1、http服务$http({ method: 'GET', url: 'data.json' }).success(function(data, status, headers, config) { console.log("success原创 2018-01-29 13:22:21 · 271 阅读 · 0 评论 -
angular使用ng-repeat时的传值
经常会遇到,当使用ng-repeat加载表格或其他内容时,由于不能像for循环一样为每一行添加不同的id,当想对某一行数据进行操作的时候会不知道如何取到相应数据,可采用如下方法: {{data.ID}} 修改 确定 如上,可在函数中添入参数:data即为该行数据,使用$($event.target)即可得原创 2018-01-24 15:01:16 · 762 阅读 · 0 评论 -
ngdialog使用心得
在正在做的项目中所有的弹窗都是用ngdialog来实现的,在这里做一下总结:1、首先在项目目录下使用npm install ng-dialog安装插件2、将ngDialog.js,ngDialog.css和ngDialog-theme-default.css 引入项目中:3、在控制器中声明:var APIGateway = angular.module('APIGateway',转载 2018-01-24 13:57:05 · 1907 阅读 · 0 评论 -
angular的mvc模式($scope)
例1html Hello {{name}}!ng-repeat="name in names">{{name}} from {{department}}jsfunction GreetCtrl($scope, $rootScope) {//rootScope根作用域$scope.name =转载 2017-10-23 20:46:57 · 268 阅读 · 0 评论 -
angular页面加载时不闪现{{}}
原: {{greeting.text}},Angular 改: ng-bind="greeting.text">,Angular 一般首页index使用ng-bind,其余使用{{}}即可转载 2017-10-25 18:37:17 · 629 阅读 · 0 评论 -
angular利用双向数据绑定改变样式
css:.text-red { background-color: #ff0000;}.text-green { background-color: #00ff00;}html: {{color}}">测试CSS样式 绿色 js:var myCSSModule = angular.mod转载 2017-10-25 20:14:50 · 909 阅读 · 0 评论 -
angular标签的显示和隐藏
html: Toggle Menu ng-show='menuState.show'> Stun Disintegrate Erase from history js:var myCSSModule = angular.module('MyC转载 2017-10-25 20:40:01 · 5867 阅读 · 0 评论 -
angular指令系统directive
1、匹配模式var myModule = angular.module("MyModule", []);myModule.directive("hello", function() { return { restrict: 'AEMC',//匹配模式,共四个选项(A属性、E元素、M注释、C样式) template: 'Hi everyone!'转载 2017-10-27 17:24:08 · 215 阅读 · 0 评论 -
angular创建独立scope及绑定策略
var myModule = angular.module("MyModule", []);myModule.directive("hello", function() { return { restrict: 'AE', scope:{},//创建独立scope,四个hello指令之间互不影响 template: '{{user转载 2017-11-07 16:58:02 · 231 阅读 · 0 评论 -
angular指令间的交互
superman strength>动感超人---力量superman strength speed>动感超人2---力量+敏捷superman strength speed light>动感超人3---力量+敏捷+发光上面共有四种指令:superman、strength、speed、light,对应交互如下:var myMo转载 2017-11-07 16:18:38 · 226 阅读 · 0 评论 -
给鼠标绑定指令事件,指令调用控制器中方法
根据不同的控制器调用不同的方法:用指令上对应的属性html howToLoad="loadData()">滑动加载 howToLoad="loadData2()">滑动加载jsvar myModule = angular.module("MyModule", []);myModule.control转载 2017-11-07 14:58:13 · 338 阅读 · 0 评论 -
前端开发环境
代码编辑工具---sublime/webstorm断点调试工具---chrome插件Batarang版本管理工具---git/git小乌龟代码合并和混淆工具---grunt(nodejs npm安装)依赖管理工具---bower单元测试工具/集成测试工具---karma(一款用来跑测试用例的runner,npm安装)+Jasmine(用来编写测试用例,npm安装)/Pr转载 2017-10-18 18:39:41 · 237 阅读 · 1 评论 -
ng-grid实现表格
在所属控制器中:$scope.gridOptions = { data: 'books', rowTemplate: '' + ' ' + '' + '', multiSelect: false,//是否支持多选 enableCellSelection: tr转载 2018-02-05 13:03:52 · 3614 阅读 · 3 评论