如下所示： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>实现数组随机排序</title>//需要导入angular.js库文件<script type="text/javascript" src="../angular-1.5.5/angular-1.5.5/angular.js"></script><script type="text/javascript">var app = angular.module("myApp", []);var arr1 = [1, 2, 3, 7, 4, 9, 5, 6];app.service("sortService", function() {this.arr = [1, 2, 3, 7, 4, 9, 5, 6];this.t;this.my...
如下所示： <html ng-app> <head><title>order by</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1" /><link href="../book/css/bootstrap.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="../file/angular-1.0.1.min.js" type="text/javascript"></script> </head> <body><div class="table-responsive" n...
最近在做项目的过程中，要求做一个考试系统，在答题页面涉及到单选框+ng-repeat来实现试卷的展示，做完后将答案传到后台，在这里主要讲下单选框+ng-repeat的几个要点 前台代码如下： <div class="container" width="1900px" data-ng-controller="QuestionSettingCtrl"><div class="text-center" data-ng-repeat="item in items"><table><tr><td data-ng-bind="$index+1 +、 +item.test" colSpan="4"></td></tr><tr><td> </td></tr>...
1.一个angularjs的学习，了解ng-class的使用技巧； 2.代码： html： <div ng-repeat=myimg in myimgs><img ng-src="{{myimg}}" ng-click="fabricChoose($index)" ng-class="{fabricImg1:$index==fabricIsSelected}"></div>css： .fabricImg1{ border:2px solid blue; }js： $scope.fabricChoose = function(i){$scope.fabricIsSelected = i; }效果就是点击选择图片 就出现蓝色border。3.分析 ng-class的使用技巧就是 ng-class={nam...
页面代码： <!-- 弹出层 --> <section class="popup-bg" ng-if="IsActive"><div class="popup-box phone-detail"><div class="popup-title popup-detail-title">通讯录<i class="iconfont popup-close-font rights " ng-click="HideMail()"></i></div><div class="content"><div class="phone" ng-repeat="User in NoticeUserList">{{User.Name}}<div class="check-item rights"><div class="check-bg"ng-class="{true:checkeds,...
最近做用户注册登录时，需要监控用户的输入以此来给用户提示，用到了angular的$watch功能，以下是例子： jsp： <form class="register ng-scope" ng-app="regist_app" onsubmit="registSumbitValid()" ng-controller="regist_control"><div class="item"><input id="username" name="username" placeholder="请填写11位手机号码" class="input-item" ng-model="username" ><span class="warnning">{{username_error}}</span></div>...
前面学习了vue，react 都有状态管理，如vue中的vuex是全局状态管理，在任何组件里都可以引用状态管理中的数据，同样，react中的redux和mbox也是，但遇到angular5却不知道了。一年前使用过angular1.x做过项目，那时全局状态可以使用$rootscope，也可以使用服务Service实现，下面就用Service方式在angular5中实现下吧先定义状态管理对象，需要存什么数据，自己定义 export class UserInfo {public userInfo: boolean;constructor(){t...
angularjs通过ng-change和watch两种方式实现对表单输入改变的监控 直接上练习代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> </head> <body ng-app="myApp" ng-controller="myContro"><div><h1>ng-change指令</h1>ng-change指令，当表单输入发生改变时，会触发该事件<br /><div>姓名：<input type="text" id="na...
AngularJS作为一个非常实用的前端框架，我们知道在AngularJS中有自己的Model和Controler。 angularJS中所有的请求都是通过js定义的Controler来完成的，也就是我们完全脱离了后台， 将整个应用程序的压力交给了客户端来完成。但是在实际开发的时候我们难免需要访问后台或者 与数据库进行交互，这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问。 在angularJS中提供了一种与远程Http服务器交互的服务，$http $http是angularJ...
下拉列表的简单使用 ng-option指令使用很简单，只需要绑定两个属性： 一个是ng-model用于获取选定的值； 另一个是ng-options用于确定下拉列表的元素数组。 <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。数据如下： $scope.engineer = {...
如下所示： //方案1：能用，但token信息不能写在服务中，应该用全局变量替代，而且还得考虑参数复合问题。 @Injectable() export class DefaultRequestOptions extends BaseRequestOptions {constructor() {super();this.headers.set(Content-Type, application/json);} } export const requestOptionProvider = {provide: RequestOptions, useClass: DefaultRequestOptions}; //方案2:能用，比较正规的实现，但以后请求就只能用my...
前言 在前端应用中，动画是一个常见的场景。在使用了一系列的动画库之后，终于需要自己来实现一个动画了。这次的动画则是基于 Angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里，需要两个动画，一个是购物车数量的增加动画，一个则是折叠页面元素的动画。 在实现的过程上，我采用了两种不同的 Angular 动画的方式： 使用 TypeScript 控制动画使用 @Component 中的 animationsAngular 动画基础 如 Angular 官网中...
前几天项目在上线过程中，出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时，会造成页面的重叠。导致这个问题的原因是：页面模板缓存，即上一个页面退出时，浏览器没有及时清空上一个页面的模板，导致新页面加载时，旧页面模板依然存在，从而页面出现重叠。 模板缓存清除：模板缓存的清除包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除，和angularJs的路由切换清除 1、以下是传统的清除浏览器的方法...
最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后面controller里介绍。不知道封装的是否符合标准，还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家。 图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader...
Angular-UI Bootstrap提供了许多组件，从流行的的Bootstrap项目移植到Angular 指令（显著的减少了代码量）。如果你计划在Angular应用中使用Bootstrap组件，我建议细心检查。话虽如此，直接使用Bootstrap，应该也是可以工作的。 Angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。 Angular-UI Bootstrap文档提供了下面的例子： view <div ng-controller="AlertDemoCtrl"><alert ng-r...