一个简易版的Angular js 三层 示例
var myApp = angular.module('produceline', []);
myApp.factory('ajax', ["$http", "$q", "$log", function ($http, $q, $log) {
return {
//post请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象),
post: function (url, data, funsuccess) {
var deferred = $q.defer();
var tempPromise;
if (data != null && data != undefined && data != "") {
tempPromise = $http.post(url, data);
} else {
tempPromise = $http.post(url);
}
tempPromise.success(function (data, header, config, status) {
deferred.resolve(data);
}).error(function (msg, code) {
$log.error(msg, "post url:" + url + " 出错,代码:" + code);
deferred.reject(msg);
});
return deferred.promise.then(funsuccess);
},
//get请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象), 此方法有问题
get: function (url, data, funsuccess) {
var deferred = $q.defer();
var tempPromise;
//判断用户是否传递了参数,如果有参数需要传递参数
if (data != null && data != undefined && data != "") {
tempPromise = $http.get(url, data); //params {params: {id:5}}
} else {
tempPromise = $http.get(url);
}
tempPromise.success(function (data, header, config, status) {
deferred.resolve(data);
}).error(function (msg, code) {
deferred.reject(msg);
$log.error(msg, "get Url:" + url + " 出错,代码:" + code);
});
return deferred.promise.then(funsuccess);
}
};
}]);
myApp.controller('producelineController', ['$scope', "ajax", function ($scope, ajax) {
//扫描枪中止符 13 为回车
$scope.endWidthScan = 13;
$scope.model = {};
$scope.partSegments = []; //生产线分段
$scope.init = function () {
$("#scantxt").focus();
$.extend($scope.model, modeljson);
$scope.partSegments = partSegments || [];
//for (var i = 0; i < $scope.partSegments.length; i++) {
// $scope.partcodesmodel[$scope.partcodes[i]] = '';
//}
};
$scope.init();
$scope.SaveSacnedProduct = function (product) {
//一次保存一个扫描项
var data = {};
data[product] = $scope.ScanedHash[product];
ajax.post($scope.model.UrlLineSave, { 'id': $scope.model.ID, 'json': angular.toJson(data) }, function (response) {
console.log('get ' + $scope.model.UrlLineSave + ' return t:' + response.t);
})
};
$scope.newSegment = function () {
var seg = { SegmentName: '', SegmentCode: '', Remark: '' };
$scope.partSegments.push(seg);
};
$scope.delSegment = function (idx,array) {
array.splice(idx, 1)
};
$scope.ProductScanComplete = function () {
$scope.CopyToHash($scope.ScaningProduct);
$scope.ScaningProduct = "";
$scope.complete.push($scope.ScaningProduct)
$scope.PlaySuccess();
}
$scope.IsProductComplete = function (product) {
if (product == '' || product == null) {
return false;
}
for (var i = 0 ; i < $scope.partcodes.length ; i++) {
var t = $scope.partcodesmodel[$scope.partcodes[i]];
if (t && t != null && t != '') {
continue;
}
return false;
}
return true;
};
$scope.AllEmpty = function (product) {
for (var i = 0 ; i < $scope.partcodes.length ; i++) {
var t = $scope.partcodesmodel[$scope.partcodes[i]];
if (t == '') {
continue;
}
return false;
}
return true;
};
$scope.showJson = function () {
alert(angular.toJson(
{
//'complete': $scope.complete,
//'partcodes': $scope.complete,
//'partcodesmodel': $scope.partcodesmodel,
ScanedHash: $scope.ScanedHash,
ID: $scope.ID
//ScaningProduct: $scope.ScaningProduct,
//ScanedPartHash: $scope.ScanedPartHash,
//samecodecount: $scope.samecodecount
})
);
};
}]);
一个简易版的Angular js 三层 示例的更多相关文章
- 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- 使用 js 实现一个简易版的模版引擎
使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- 使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
- 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...
- 使用 js 实现一个简易版的 async 库
使用 js 实现一个简易版的 async 库 具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NU ...
- 使用 js 实现一个简易版的 vue 框架
使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...
- 手动实现一个简易版SpringMvc
版权声明:本篇博客大部分代码引用于公众号:java团长,我只是在作者基础上稍微修改一些内容,内容仅供学习与参考 前言:目前mvc框架经过大浪淘沙,由最初的struts1到struts2,到目前的主流框 ...
随机推荐
- Debian9.5下sftp配置和scp用法
基于 ssh 的 sftp 服务相比 ftp 有更好的安全性(非明文帐号密码传输)和方便的权限管理(限制用户的活动目录). 1.如果只想让某些用户只能使用 sftp 操作文件, 而不能通过ssh进行服 ...
- 操作系统——第五章 输入输出(I/O)管理
这就是SDT表和DCT表
- url链接打开本地应用(测试通过)
基于windows!! 类比mailto://XXXX 主要参考: https://www.cnblogs.com/snow365/p/6428212.html 应用 1.在网页上本地办公 网页应用越 ...
- 云服务器 ECS Linux 系统下使用 dig 命令查询域名解析
云服务器 ECS Linux 系统可以使用通常自带的 dig 命令来查询域名解析情况.本文对此进行简要说明. 查询域名 A 记录 命令格式: dig <域名> 比如,查询域名 www.al ...
- ArcGIS api for javascript——放大时切换图层
描述 本例展示了如何在地图里指出显示的缓存或切片的细节等级(LODs).当打开示例地图,可以看到一些来自ArcGIS Online ESRI_Imagery_World_2D图层的影像.这个应用程序配 ...
- 自己定义View之Chart图标系列(1)——点阵图
近期要做一些图表类的需求,一開始就去github上看了看,发现开源的图表框架还是蛮多的.可是非常少有全然符合我的需求的.另外就是使用起来比較麻烦.所以就决定自己来造轮子了~~~ 今天要介绍的就是And ...
- Ubuntu下安装git工具
环境:Ubuntu 9.10 git-1.8.2.3.tar.bz2 1.将安装包下载到所选文件夹下,如:/tmp 2.tar -xjf git-1.8.2.3.tar.bz2 3.cd git-1. ...
- 用motion实现家庭视频监控
需求?当然不是为了艳照.你们这些猥琐的人类! 毕竟家里总会有没人的时候,出门走到半路忘记煤气灶是不是关了,还得回去看看. 在这个科技以人为本的时代,当然应该是拿出智能手机联网看看啦.还有万一有人闯空门 ...
- xml方式封装通信数据方法
xml方式封装通信数据方法 public static function xmlToEncode($data) { $xml = ""; foreach($data as $key ...
- ajax --- Ajax跨域请求保证同一个session的问题
我们知道,根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务 ...