Question

我正在通过MongoDB的两个不同的函数和服务获得两个数组。

一个数组（rolesList）用于填充选择框，另一个数组（userList）用于填充表。事实是，从那里获得最后一个数组的集合只有角色ID，并且我需要将角色名称打印到表中，因为我已经有了数据，所以我需要一种方法来从RolesList数组中获取角色名称，并且用它更新userList.role。

什么是最好的方法？
我留下了一段代码，以便您可以更好地理解我的问题。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.userList = [ { _id: 'ae21e1f0663dddf0c6e5e8b',
    fullname: 'Cosme Fulanito',
    lastname: 'Fulanito',
    lastname2: '',
    email: 'cosme.fulanito@mail.com',
    role: 'ADMIN_APPLICANT_PROFILE', //this is the _id on rolesList and I need to print the name
    name: 'Cosme' },
  { _id: 'ae21e4b0663dddf0c6e5e8d',
    fullname: 'Benito Camelo',
    lastname: 'Camelo',
    lastname2: '',
    email: 'benito.camelo@mail.com',
    role: 'PURCHASER_PROFILE',
    name: 'Benito' } ]


$scope.rolesList = [ {
_id: "ADMIN_APPLICANT_PROFILE",
name: "Administrador solicitante"
},
{
_id: "PURCHASER_PROFILE",
name: "Comprador" } ]

   
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

    <div class="request-table-overflow">
      <table class="table m-b-none">
        <thead>
          <tr>
            <th>#</th>
            <th>Usuario</th>
            <th>Tipo de Cuenta</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th></th>
          </tr>
        </thead>
        <tbody ng-app="myApp" ng-controller="myCtrl">
          <tr ng-repeat="row in userList" st-select-row="row">
            <td class="text-muted"><span class="badge bg-black">{{$index +1}}</span></td>
            <td>{{row.email}}</td>
            <td>{{row.role}}</td> <!--This need to be updated to display the value of rolesList.name-->
            <td>{{row.name}}</td>
            <td>{{row.lastname}}</td>
            <td>
              <h5 ng-click="details(row._id)">
                             <span class="text-muted">Ver detalle </span>
                             <i class="fa fa-chevron-right" aria-hidden="true"></i>
                           </h5>
            </td>
          </tr>
        </tbody>

      </table>
    </div>

Answer 1

在这种情况下，我的个人方法是将对象用作字典。

为此，您可以将rolesList更改为以下形式：

$scope.rolesList = {
    "ADMIN_APPLICANT_PROFILE": "Administrador solicitante",
    "PURCHASER_PROFILE": "Comprador" 
}

然后在表格行中，您可以使用角色值引用角色名称

<td>{{ rolesList[row.role] }}</td>

如果您无法更改roleList的格式，则可以使用以下循环创建字典

$scope.roleListDict = {};
angular.forEach($scope.rolesList, function(role, roleIndex) {
    $scope.roleListDict[role._id] = role.name;
});

和

<td>{{ roleListDict[row.role] }}</td>

Answer 2

您只需在两个$ scope之后将这些行添加到JS中：

for(var i in $scope.userList){
  for(var j in $scope.rolesList){
    if($scope.userList[i].role === $scope.rolesList[j]._id){
      $scope.userList[i].role = $scope.rolesList[j].name
    }
  }
}

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.userList = [ { _id: 'ae21e1f0663dddf0c6e5e8b',
    fullname: 'Cosme Fulanito',
    lastname: 'Fulanito',
    lastname2: '',
    email: 'cosme.fulanito@mail.com',
    role: 'ADMIN_APPLICANT_PROFILE', //this is the _id on rolesList and I need to print the name
    name: 'Cosme' },
  { _id: 'ae21e4b0663dddf0c6e5e8d',
    fullname: 'Benito Camelo',
    lastname: 'Camelo',
    lastname2: '',
    email: 'benito.camelo@mail.com',
    role: 'PURCHASER_PROFILE',
    name: 'Benito' } ]


$scope.rolesList = [ {
  _id: "PURCHASER_PROFILE",
  name: "Comprador"
  },
  {
  _id: "ADMIN_APPLICANT_PROFILE",
  name: "Administrador solicitante" } ]

for(var i in $scope.userList){
  for(var j in $scope.rolesList){
    if($scope.userList[i].role === $scope.rolesList[j]._id){
      $scope.userList[i].role = $scope.rolesList[j].name
    }
  }
}
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

    <div class="request-table-overflow">
      <table class="table m-b-none">
        <thead>
          <tr>
            <th>#</th>
            <th>Usuario</th>
            <th>Tipo de Cuenta</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th></th>
          </tr>
        </thead>
        <tbody ng-app="myApp" ng-controller="myCtrl">
          <tr ng-repeat="row in userList" st-select-row="row">
            <td class="text-muted"><span class="badge bg-black">{{$index +1}}</span></td>
            <td>{{row.email}}</td>
            <td>{{row.role}}</td> <!--This need to be updated to display the value of rolesList.name-->
            <td>{{row.name}}</td>
            <td>{{row.lastname}}</td>
            <td>
              <h5 ng-click="details(row._id)">
                             <span class="text-muted">Ver detalle </span>
                             <i class="fa fa-chevron-right" aria-hidden="true"></i>
                           </h5>
            </td>
          </tr>
        </tbody>

      </table>
    </div>

从AngularJS中的另一个数组更新仅一个数组值

2 个答案: