Angular.js(出库增加)

这个页面让我真正理解了前端如何在页面显示数据。后台传过来的数据需要我做结构上的修改之后再传给后台&＃xff0c;当时写了数组和循环&＃xff0c;后来发现了更加简单的方式。模型对象始终使用一个&＃xff0c;操作页面数据的模型和后台的模型合用一个。业务逻辑不能局部完成&＃xff0c;要有整体的概念。这个页面处理数据的时候老大还花时间给我讲解了一番&＃xff0c;真的十分感谢他。&＃xff08;虽然吓得我连午饭都没有吃&＃xff09;
管理代码是个很好得习惯&＃xff0c;时不时回头整理一遍就像抚摸自己的孩子一样&＃xff0c;这就是我制造的东西啊&＃xff01;心里有这样的感叹&＃xff0c;吧{}放在该放的位置&＃xff0c;就像把孩子凌乱的头发拨正。&＃xff08;虽然我没有孩子&＃xff09;很可惜&＃xff0c;现在这个公司并不强调格式。因为是创业公司&＃xff0c;人还很少。是风险比较低的创业公司。我喜欢这家公司&＃xff0c;喜欢这里的人&＃xff0c;但是我要离开了。
1、说说这个页面最重要的数据处理&＃xff0c;这让我第一次见识到了什么叫做优美的代码。&＃xff08;这个是相对的&＃xff0c;这里的优美是指相对于我之前遍布整个控制器的循环&＃xff0c;实在是让人眼花缭乱&＃xff0c;工作效率极低&＃xff09;

//这是后台传过来的模型$scope.TableDetail &＃61; [];//用于循环的数组$scope.InStockEntity &＃61; {"WareHouseID": 0,"ProviderID": 0,"proNum": 0,"Remark": null,"inStockDetails": [{"ProductID": 0,"isNum": 0,"pNum": 0,"IndexID":0}]};

//这是用于传回后台的模型var data &＃61; {&＃39;inStockDetails&＃39;: [],&＃39;proNum&＃39;: $scope.num,&＃39;WareHouseID&＃39;: $scope.Ware,&＃39;ProviderID&＃39;: $scope.supper,"Remark": $scope.InStockEntity.Remark,}for (var i &＃61; 0; i <$scope.TableDetail.length; i&＃43;&＃43;) { if (!$scope.TableDetail[i].is_delete) {data[&＃39;inStockDetails&＃39;].push({&＃39;productID&＃39;: $scope.TableDetail[i][&＃39;IndexID&＃39;],&＃39;isNum&＃39;: $scope.TableDetail[i].pNum,&＃39;pNum&＃39;: $scope.TableDetail[i].pNum,})}console.log(data);}

2、修改的绑值

<span class&＃61;"m" ng-model&＃61;"detailModel.pSKU"> 商品代码:{{detailModel.pSKU}}span>

和Ext真的原理相同啊&＃xff01;Ext中使用单花括号绑值的。如果需要编辑&＃xff0c;就会定义一个viewmodel&＃xff0c;然后引入到view中。这里就是有一个模型啊&＃xff0c;模型掌管着变化啊&＃xff01;
3、开始建立起使用angular写事件的思想

<table class&＃61;"table w-full no-padder m-t-n-lg active success table-hover "><thead><tr><th width&＃61;"8%" class&＃61;"text-center "><label class&＃61;"i-checks m-b-none " style&＃61;"margin-left:-3px"><input type&＃61;"checkbox" id&＃61;"all" name&＃61;"check" class&＃61;"group-checkable"><i>i>label>th><th width&＃61;"32%" class&＃61;"">商品代码th><th width&＃61;"32%">商品名称th><th width&＃61;"32%">数量th>tr>thead><tbody><tr id&＃61;"rows" ng-repeat&＃61;"table in InStockEntity.inStockDetails" ng-if&＃61;&＃39;!table.is_delete&＃39;><td class&＃61;"text-center "><label class&＃61;"i-checks m-b-none " style&＃61;"margin-left:-3px"><input type&＃61;"checkbox" class&＃61;"group-checkable" ng-click&＃61;"table.is_selected&＃61;table.is_seleted?false:true"><i>i>label>td><td><span class&＃61;"protable" type&＃61;"text">{{table.pSKU}}span>td><td> {{table.pName}}td><td><span type&＃61;"text" >{{table.pNum}}span>td>tr>tbody><tfoot><tr><td> <span>总计&＃xff1a;span>td><td><span type&＃61;"text" >{{calculate_total()}}span>td>tr>tfoot>
table>

控制器&＃xff0c;首先看总计。看看在控制器里面是这样写方法的。angular.forEach()遍历函数。ng-if真的很奥妙&＃xff01;

//计算数据(ng)$scope.calculate_total &＃61; function () {var num &＃61; 0;angular.forEach($scope.InStockEntity.inStockDetails, function (table) {if (!table.is_delete) {num &＃61; num &＃43; table.pNum; }})$scope.num &＃61; num;return num;}

angular.forEach()遍历函数

var objs &＃61;[{a:1},{a:2}];
angular.forEach(objs, function(data,index,array){
//data等价于array[index]
console.log(data.a&＃43;&＃39;&＃61;&＃39;&＃43;array[index].a);
});


objs&＃xff1a;需要遍历的集合
data:遍历时当前的数据
index:遍历时当前索引
array:需要遍历的集合&＃xff0c;每次遍历时都会把objs原样的传一次。

ng-if&＃61;&＃39;!table.is_delete&＃39;

ng-if会移除dom&＃xff0c;生成dom&＃xff0c;而ng-show只是改变其display属性。
当时真的狠狠苦恼了一番的效果&＃xff1a;

ng-click&＃61;"table.is_selected&＃61;table.is_seleted?false:true"

$scope.deleteFunc &＃61; function () {if (!$scope.popvop) {popExecFunc &＃61; function () {for (var i &＃61; 0; i <$scope.InStockEntity.inStockDetails.length; i&＃43;&＃43;) {var table &＃61; $scope.InStockEntity.inStockDetails[i]if (table.is_selected) {table.is_delete &＃61; true;} else if(!table.is_selected){var inforData &＃61; { code: "400", data: "没有删除选项~(๑• ₃ •๑)" }$scope.toaster(inforData, "warning")}} };popCancelFunc &＃61; function () {}}};

给ng-repeat生成的表格做删除。
table.is_delete
关于这个属性&＃xff0c;为什么是is_delete&＃xff0c;而不是delete,或者deleted。现在总结的时候有点搞忘了&＃xff0c;要么是根据table数据里后台返回值属性设置的&＃xff0c;要么就是经验判断。这个当时也是一个难点的。
4、添加页面考虑到了用户说不定想要持续性添加&＃xff0c;就是说如果在点击确定保存按钮后&＃xff0c;刷新页面而不是跳转到详情页。

if (!$scope.popvop) {popExecFunc &＃61; function () {$state.go("app.instock_add", {}, { reload: true });};popCancelFunc &＃61; function () {$state.go(&＃39;app.instock&＃39;)}}


5、扫条码
相同的数据加&＃xff0c;总数加1。这个也是老大指导我的。曾经查找这个方法的时候&＃xff0c;观摩了老大怎么弄得。首先他听我说着想要实现的效果&＃xff0c;马上脑子里面就有一个概念“我好像在哪里看到过&＃xff0c;我知道这个想法”&＃xff08;积累深厚&＃xff09;&＃xff0c;他也是从知道这个函数的用法到能够使用他&＃xff0c;整个过程非常迅速。看到他解决问题的效率和速度让我意识到了我跟他的差距真的不是一星半点。

//测试按钮函数$scope.pbar &＃61; function () {///检测数组有没有这个对象var querResult &＃61; $linq($scope.InStockEntity.inStockDetails).where(function (x) { return x.pBarCode &＃61;&＃61; $scope.pbarcode; }).toArray(); if (querResult.length !&＃61; 0) { querResult[0].pNum&＃43;&＃43;; } else {//不存在,通过条码获得商品数据var RtnData &＃61; Get.get(app_settings.api_host_url &＃43; &＃39;/api/product/SingleProductPull&＃39;, { ids: $scope.pbarcode });RtnData.then(function (resultMessage) {resultMessage.Data.pNum &＃61; 1;$scope.detailModel &＃61; resultMessage.Data;console.log($scope.detailModel);//长宽高$scope.long &＃61; $scope.detailModel.pWHL.split("*")[0];$scope.width &＃61; $scope.detailModel.pWHL.split("*")[1];$scope.height &＃61; $scope.detailModel.pWHL.split("*")[2];$scope.TableDetail.push($scope.detailModel);$scope.InStockEntity.inStockDetails &＃61; $scope.TableDetail;});}}