Question

我有一个php api，它返回公司列表和用户列表，每个用户都分配了一个company_id。

（用户：CustomerList）（公司：CompanyList）

公司有一个company_id和company_name值。

我正在使用resolve来获取这两个数组。

显示CustomerList时，会显示客户的company_id，一切正常。

但我需要的是代替显示的company_id，我需要在CustomerList中显示company_name。

CustomerList的company_id与CompanyList中的id相关。

只是company_name包含在companyList中而不是CustomerList中。但ID是相关的并包含在userList中。

我需要获取CustomerList中id的company_name并将其显示在视图中。

resolve: { userList:function($http,$stateParams){
        return $http.post('/api/get_users.php',{role:$stateParams.role},{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
                .then(function(response){
                    console.log(response);
                    return response.data.data;
                })
                },
             companyList:function($http,$stateParams){
               return $http.get('/api/get_companies.php')
                .then(function(response){
                    console.log(response);
                    return response.data.data;
                })
     }
 }

controller("CustomerList", function($scope,$location,$http,$stateParams,userList,companyList){
                    $scope.customers = userList;
                    $scope.companies = companyList;

                })

查看

<table>
<thead>
<tr>
<th>Username</th>
<th>Company Name</th>
<th>Contact Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers">
<td>{{ customer.username }}</td>
<td>{{ customer.company_id }}</td>
<td>{{ customer.contact_name }}</td>

</tr>
</tbody>
</table>

customer.company_id与companyList中的ID相关，我需要返回companyList.company_name，而不是在客户中显示公司ID。

提前感谢您的帮助。

Answer 1

你需要加入他们。因此，您需要创建一个新对象，其中包含username，contact_name，company_name以及您需要的其他属性。您需要使用map()来返回一个新对象数组。使用username和contract_name很容易，只需将属性分配给新创建的对象即可。使用company_name，我们需要找到合适的公司并将其名称分配给新创建的对象。

包含简单数据的工作示例，它根据id连接两个数组。

＆＃13;

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', function($scope){
  
  var userList = [
    {username: 'A user', contact_name: 'A contract', company_id: 1},
    {username: 'B user', contact_name: 'B contract', company_id: 2},
    {username: 'C user', contact_name: 'C contract', company_id: 3},
  ];
    
  var companyList = [
    {id: 1, name: 'A Company'},
    {id: 2, name: 'B Company'},
    {id: 3, name: 'C Company'},
  ];
  
  $scope.customers = userList.map(item => {
  
    var foundCompany = companyList.find(company => company.id === item.company_id);
  
    return { 
             username: item.username, 
             contact_name: item.contact_name, 
             company_name: foundCompany ? foundCompany.name : ''  
           };
    });
                                
  $scope.companies = companyList;

}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <table>
    <thead>
      <tr>
        <th>Username</th>
        <th>Company Name</th>
        <th>Contact Name</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="customer in customers">
        <td>{{ customer.username }}</td>
        <td>{{ customer.company_name }}</td>
        <td>{{ customer.contact_name }}</td>
      </tr>
    </tbody>
  </table>
</body>

＆＃13;

Answer 2

您可以通过以下方式构建公司列表：列表中的每个对象都是键值对，键为公司ID，值为公司详细信息的完整对象，然后轻松访问。

例如

$scope.companies = {
  {
    "companyId1" : {
       "name" : "companyName",
       "field2" : "vlue2"


     }

  },
  {
    "companyId2" : {
       "name" : "companyName2",
       "field2" : "vlue2"


     }

  }
}

然后在你的html中使用

访问它

{{companies[customer.company_id].name}}

这对你有用

Answer 3

映射您的userList，使其包含companyName

var mappedCustomerList= userList.map(function(user){
    var user=userWithCompanyName;
    userWithCompanyName['companyName']=
    companyList[companyList.findIndex(function(company){return company['id']==user['company_id']})].companyName;
    return userWithCompanyName;
});
$scope.customerList=mappedCustomerList;

然后从您的视图中，您可以访问companyName

<td>{{customer.companyName}}</td>

获取相关的数组元素AngularJS

3 个答案: