Question

我需要使用AngularJS开发一个页面。

我有两张桌子。

Table 1 : StateList  

StateCode   | StateName
-------------------------------
AZ          |  ARIZONA      
CA          |  CALIFORNIA
NY          |  NEW YORK

Table 2: CustomerDetail
Name    |  BornState  | LivingState
-----------------------------------------
Peter   |  AZ         | NY
Bob     |  CA         | AZ

想要在HTML页面上显示如下列表。

Customer Name   | Customer BornState    | Customer LivingState
------------------------------------------------------------------------
Peter           | ARIZONA               | New York
Bob             | CALIFORNIA            | ARIZONA

我想要显示每种状态信息的状态名称，例如BornState和LivingState，而不是状态代码。我可以从表2中获取列表：CustomerDetail但 如何为每种状态信息转换状态代码的状态代码？

提前致谢

添加更多详情

我有$ stateProvider如下

.state("customerDetail",{
                        url:"/customer/detail/:customerId",
                        templateUrl:"app/customer/customerDetail.html",
                        controller: "DetailCtrl as vm",
                        resolve: {
                            customer: function (Restangular, $stateParams) {
                                return Restangular.one('customer', $stateParams.customerId).get();
                            }
                        }
                    })

这给我阵列

{"customerId":"1","customerName":"Bob","BornState":"CA","LivingState":"AZ"}

我的状态数组列表就像

 [{"Code":"NY","Name":"New York"},{"Code":"AZ","Name":"ARIZONA"},{"Code":"CA","Name":"CALIFORNIA"}]

我想显示完整的州名而不是州代码

Answer 1

这是一个傻瓜

//已编辑 http://plnkr.co/edit/s1XtDHA3ancyP3ceTxeX?p=preview

在你的范围内：

 $scope.StateList  = {} ;
 //init the $scope.StateList  
 var statList = [{"Code":"NY","Name":"New York"}, {"Code":"AZ","Name":"ARIZONA"},{"Code":"CA","Name":"CALIFORNIA"}];
 for(var i in statList){
   $scope.StateList[statList[i]["Code"]] = statList[i]["Name"];
 }

 $scope.CustomerDetail = [{
    "CustomerName" : "Peter",
    "CustomerBornState" :"AZ",
    "CustomerLivingState" : "NY"
 },{
    "CustomerName" : "Peter",
    "CustomerBornState" :"CA",
    "CustomerLivingState" : "AZ"
 }];

和html：

 <table>
 <tr ng-repeat="customer in CustomerDetail">

   <td>
     {{customer.CustomerName}}
   </td>
   <td>
      {{StateList[customer.CustomerBornState]}}
   </td>
   <td>
     {{StateList[customer.CustomerLivingState]}}
   </td>
 </tr>

你也可以用更干净的方式来做。在控制器中，从customerDetail stateProvider获取数据后，在$ scope.CustomerDetail中添加一个带有真实城市名称的字段，并将其显示在视图中。

Answer 2

你应该真的使用SQL，并加入两个表，但如果你想要一个角度解决方案，就是这样：

在您的控制器中：

$scope.cus = [array of customers];
var countries = [array of countries];
$scope.countries = {};
$.each(countries, function(k,v) {
  $scope.countries[v.StateCode] = v.StateName;
});

您的HTML表格：

<tr ng-repeat="row in cus">
  <td>{{row.name}}</td>
  <td>{{countries[row.BornState]}}</td>
  <td>{{countries[row.LivingState]}}</td>
</tr>

我所做的就是创建一个新对象作为哈希表，其中提取需要O（1）。

Answer 3

我建议熟悉LinqJS ..我已经越来越多地将我的应用程序特定的模型交互/扩充移动到客户端。

使用Join语句可以非常快速且无痛地完成。

AngularJS中的多查询

3 个答案: