在 ng-repeat 中使用外键

Question

我有两个 table：

A jobs table 有 3 个字段：id、client_id、name.
A clients table 有 2 个字段：id, name.

使用 Angular 1.5，我正在迭代作业：

controller('JobsController', ['$scope', 'Job', 'Client', function($scope, Job, Client) {
    $scope.jobs = Job.query();
    $scope.clients = Client.query();
}]);

HTML:

<tr ng-repeat="job in jobs">
    <td>
        {{clients[job.client_id].name}}
    </td>
    <td>
        {{job.name}}
    </td>
</tr>

在HTML中，第一列应该是客户名称。事实上，这是行不通的，因为 $scope.clients 是一个看起来有点像这样的对象数组：

[{'id':4, 'name':'test_name'}, {'id':7, 'name':'another client'}]

有没有办法在我的 ng-repeat 循环中通过 id 从这个 clients 数组中选取？

$scope.jobs 看起来像：

[{'id':100, 'client_id': 4, 'name': 'a job'}, ...]

Answer 1

首先，在服务器端进行连接可能更容易，您的 $scope.jobs 看起来更像：

[
{
    'id': 100,
    'name': 'a job',
    'client': {
        'id': 4
        'name': 'test_name'
    }
} 
...
]

如果你需要在前端做，我会做的是在你的控制器中添加一个方法来获取指定作业的客户端。像这样：

$scope.getClientName = function(job) {
    //to prevent errors if $scope.clients is not loaded yet
    if (!$scope.clients) {
        return;
    }

    for (var c = 0; c < $scope.clients.length; c++) {
        var client = $scope.clients[c];
        if (client.id = job.client_id) {
            return client.name;
        }
    }
}

然后代替 {{clients[job.client_id].name}} 调用您的函数并传入 job:

{{getClientName(job)}}

Answer 2

你可以在前端做如下

$scope.clients = [{'id':1, 'name':'test_name'}, {'id':4, 'name':'another client'}];
$scope.jobs = [{'id':100, 'client_id': 4, 'name': 'a job4'}, {'id':100, 'client_id': 1, 'name': 'a job1'}, {'id':100, 'client_id': 24, 'name': 'a job24'}];
function fillJobsByClient(jobs, client){
    for(var i=0; i<jobs.length; i++){
        if(jobs[i].client_id == client.id){
            jobs[i].client = client;
            delete jobs[i].client_id;
        }
    }
}

$scope.clients.forEach(function(client){
    fillJobsByClient($scope.jobs, client);


});

console.log($scope.jobs);

Answer 3

我知道这已经晚了，但我认为这可能有助于为其他人指明正确的方向。这就是您可以在前端执行此操作的方法，您应该加载数组 OnInit，然后使用 if 语句 select 正确的详细信息字段。

<tr *ngFor='let j of jobs'>    
  <td>
    <div *ngFor='let c of clients'>
      <div *ngIf='c.id== j.client_id'>{{j.name}}</div>
    </div>
 </td>
</tr>

在 ng-repeat 中使用外键

Using foreign key in ng-repeat

foreign-keys

angularjs

ng-repeat