模板<form id="login-form" class="login-from" #registerForm="ngForm" (ngSubmit)="doSubmit(registerForm.value)"><mat-form-field><input matInput placeholder="邮箱" id="email" name="email" [(ngModel)]="formData.email" required pattern="[\w]+?@[\w]+?\.[a-z]+?"><mat-error *ngIf="formErrors.email">{{ formErrors.email }}</mat-error></mat-form-field><fieldset ngModelGroup="passwordGroup" #passwordGroup="ng...
之前我们用angular设置了一个定时器，今天我们就根据定时器进行一些练习。使用内置服务获取以下信息：1.获取屏幕高度2.获取屏幕宽度3.获取页面title4.获取URL协议5.获取URL主机6.获取端口号7.获取URL的hash部分8.获取访问地址，即URL地址其他要求：1.高度和宽度打开页面2秒后显示出来2.title，协议，主机在打开页面3秒后显示出来3.端口号，url地址在打开页面5秒后，弹出提示框询问是否显示，若点击是，则展示出来，否则不展示源码：...
在angular项目中，如果使用到js封装的一些插件，需要手动引入js文件和css文件，如果在应用入口页直接使用link方式引入的话，会阻塞首屏的加载，甚至会产生冗余的样式表；下面是一种在组件内引用外部样式的方法。首先介绍Angular的一个枚举类：enum ViewEncapsulation {EmulatedNativeNone }ViewEncapsulation 的值是用来指定，在封装Angular组件的时候，如何处理样式和标签之间的关系，默认值是：ViewEncapsulation.Emulated; 用法...
页面的提交按钮采用的是固定定位在页面的底部，键盘弹出后，提交按钮紧挨着键盘的上方， 输入框获得焦点后，键盘弹出，并且输入框回自动定位上方的空白处， 此时由于键盘上方固定定位的提交按钮的原因有可能会遮挡住获得焦点的输入框， 从而导致用户看不见输入框，需要用户手动滑动屏幕，移动输入框的位置，才可以进行输入内容。解决办法：1.监听window的大小的变化，来判断键盘的弹出和收回2.获取输入框底部的偏移位置，即输入框底...
在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watch实现了页面随model的及时更新。$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。(2)watch方法用法$watch(watchFn,watchAction,deepWatch)watchFn:a...
路由router.jsuse strict;angular.module(app).config([$stateProvider, $urlRouterProvider, function($stateProvider, $urlRouterProvider) {$stateProvider.state(main, {url: /main,templateUrl: view/main.html,controller: mainCtrl}).state(position, {url: /position/:id, //这里需要传入一个id的参数放在url后面传递过去templateUrl: view/position.html,controller: positionCtrl});$urlRouterProvider...
WebApp底部菜单栏的高亮效果需要用到一个指令，其实还需要做一个交互，就是点击的时候需要跳转，像这种情况一般会用到ui.router路由模块的一个指令，跳转一般有两种方法，一种是使用指令进行跳转，一种是利用服务进行跳转。指令是ui-sref，这相当于给这个元素绑定一个点击事件，当这个元素被点击的时候，它就会跳转到对应的页面或者是路由。同时被点击的时候，按钮还需要有个高亮的效果，这个指令叫做ui-sref-active=”select”htm...
<script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <script type="text/javascript" src="js/angular-route.js" ></script> <script> // 初始化数组 var users = [{"id":1,name:张三,pwd:111,age:20,sex:男,state:false}, {"id":"2","name":李四,pwd:222,age:21,"sex":女,state:false}, {"id":3,name:王五,pwd:333,age:22,sex:男,state:false}]...
要求：安装node6.9，npm3.0以上版本 接下来两步完成项目的搭建1、安装全局angular cli脚手架命令 npm install -g @angular/cli2、在想搭建项目的目录下，shift+鼠标右击，（选择当前窗口打开命令行），在cmd下执行命令ng new my-app项目环境搭建成功，在my-app目录下打开cmd窗口,执行 npm install 安装依赖 npm install安装依赖成功后，，执行命令ng serve --open项目可以浏览器运行了！以上就是搭建angular2.0项目的简单方法...
在实际业务中经常需要等待几个请求完成后再进行下一步操作。但angularjs中$http不支持同步的请求。解决方法一：$http.get(url1).success(function (d1) {$http.get(url2).success(function (d2) {//处理逻辑});});解决方法二：then中的方法会按顺序执行。var app = angular.module(app,[]); app.controller(promiseControl,function($scope,$q,$http) {function getJson(url){var deferred = $q.defer();$http.get(url).success(fu...
本篇文章主要介绍了AngularJS的ng-click传参的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧今天遇到个难题就是ng-click传参问题，在网上找了好多资料，先留个笔记<ul id="dataSet" ng-repeat="item in infos" ng-model="dataSet"><li ng-click="sentOutQuery({{item.detailId}})" ><p class="voucherLeft"><p class="p1">{{item.transAmount}}</p><p class="p2">已分配：<span >{{item.useP...
1.引入文件 /select2.css, /select2-bootstrap.css, /select2.min.js,‘/angular-select2.min.js’2.页面3.html<select2 class="form-control" ng-model="modelName" s2-options="item.value as item.name for item in dataList" multiple="multiple" placeholder="-请选择-"></select2> //dataList是从接口请求来的数据 ， modelName是多选的变量值4.js $scope.getSelectDataList = url = (res.code===$scope.dataList=[11111,101...
页面： 引入文件/select2.css,/select2-bootstrap.css,/select2.min.js,/ui-select2.jshtml:<div ui-module=> < ui-select2= ng-model= // ng-model = ng-options= //orgNameList是从接口里取出的数据，item.orgName是显示在option里的内容，item.orgCode就是ng-model的值 ng-change=> //每次点击option调用事件 </> </div>js:$scope.selectedOrgName = ; //ng-model的值 $scope.getInsuranceOrgList = function () { ...
最近工作中会经常遇到一些公用提示，使用框架自带很多时候不方便所以便自己编写了一个公共提示模块，下面这篇文章主要介绍了利用Angular.js编写公共提示模块的方法教程，需要的朋友可以参考借鉴，下面来一起看看吧。前言在编写一些大型工程的时候，会经常遇到一些公用提示，使用框架自带很多时候不方便，于是我手写了一个，下面来看看详细的介绍：效果图如下方法如下一、先在angular中注册一个模块二、注册一个模块 注入依赖三、返...
这篇文章主要介绍了AngularJS获取json数据的方法,结合实例形式详细分析了AngularJS获取json数据的详细步骤、操作技巧与相关注意事项,需要的朋友可以参考下本文实例讲述了AngularJS获取json数据的方法。分享给大家供大家参考，具体如下：学习了这么多天的AngularJS，今天想从实战的角度和大家分享一个简单的Demo--用户查询系统，以巩固之前所学知识。功能需求需要满足两点 1.查询所有用户信息，并在前端展示 2.根据id查询用户信息，...