Question

我有两张桌子：

包含3个字段的作业表格：id，client_id，name。
包含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'}]

在我的clients循环中有没有办法从id数组中选择ng-repeat数组？

$scope.jobs看起来像：

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

Answer 1

首先，在服务器端进行联接可能更容易，nillable="true"看起来更像是：

$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

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语句来选择正确的详细信息字段。

<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中使用外键

3 个答案: