Angular.js（出库列表页）

来源：互联网发布：3d头像制作软件编辑：程序博客网时间：2024/04/30 04:40

Angular项目做了3个月，挑出重点说一下。
首先是我的出库页面。
因为是在框架上做的开发，css样式用的是框架定义好的，比如width用的省略w代替，15px。框架里的一些：All jQuery plugins are depended on ui-jq, do not need create the Angular Directive for each of the plugin。ui-load for lazy loading the js and css files。ui-router for Nested Routing and Nested View。
说说绑值
1、如何在下拉控件进行绑值。

  <select class="m-l-xl conter" ui-jq="multiselect" multiple="multiple" ui-options="wareselects">  <option ng-repeat="wareh in warehouses" value="{{wareh.IndexID}}}">      {{ wareh.whName}}  </option></select>

控制器，定义一个warehouses 模板，里面包含后台传递的字典数据。可以想得到里面有多个属性。因此在上方ng-repeat中任意定义了一个变量来循环这个模板，来得到里面的属性。

 $scope.warehouses = SystemParam.dict().Warehouses;

2、第二种绑值

 <select  class=" conter m-l-xl " ui-jq="multiselect" multiple="multiple" ui-options="ticketselects" ng-model="insstatus" ng-options="OrderStatus.DicValue as OrderStatus.DicKey for OrderStatus in  PurOrderStatuss"></select>

控制器，和第一种原理是一样的。

 $scope.PurOrderStatuss = SystemParam.dict().PurOrderStatus;

3、最简单的绑值

   <td>仓库：{{InStockEntity.whName}}</td>

控制器,InStockEntity 是后台命名的实体，前后保持一致。实体里面有很多属性，对应的是数据库中的表。

 var parameters = { 'ids': details }; var RtnData = Get.get(app_settings.api_host_url + '/api/instock/SingleStock', parameters); RtnData.then(function (resultMessage) {        $scope.InStockEntity = resultMessage.Data;          })

4、表格绑值，跟下拉框绑值原理一样。

<table class="bg-light lter  w-full wrapper-lg table " style="margin-bottom:0px;background-color:#ffffff;"> <tr>    <th style="border-top:0px;padding-left:27px">商品代码</th>    <th style="border-top:0px;padding-left:27px">商品名称</th>    <th style="border-top:0px;padding-left:27px">数量</th> </tr><tbody>   <tr ng-repeat="table in InStockEntity.inStockDetails">      <td style="height:37px;">{{table.pSKU}}</td>      <td>{{table.pName}}</td>      <td>{{table.isNum }}</td>      </tr></tbody></table>

5、跳转页面的时候传递参数

  window.jumpFun = function (indexid) {        $state.go('app.instock_search', { SearchID: indexid })        }

关于jumpFun

{  "aTargets": [9],   "mRender": function (data, type, full) {                   if (full.insStatusName == "已审核") {        var Display = "none";        var center = "";     } else {        var center = "text-centers";              }return ' <div class="' + center + '" ><button class="btn btn-default btn-sm " onclick="jumpFun(' + full.IndexID + ')">查看</button> <button class="btn btn-default btn-sm m-l-xs " onclick="jumpFunc(' + full.IndexID + ')" style="display:' + Display + '">修改</button> ';                }            },

这是datatables里面的代码（实际上是一列）

0 0