Angular - связать два источника API в таблице на основе идентификатора FK

Question

Angular - связать два источника API в таблице на основе идентификатора FK

0

Я действительно новичок в Angular, и я пытаюсь создать список пользовательских транзакций, представляющих время действия и имя пользователя. В моем API аудита у меня есть идентификатор действия и пользовательский FK, который ассоциируется с моим User API, и я показываю его следующим образом:

HTML
<table>
    <thead>
        <tr>                
            <th>
                Date/Time
            </th>
            <th>
                User
            </th>                
        </tr>
    </thead>
    <tbody>           
        <tr ng-repeat="audit in audit.data>
            <td>{{audit.audit_date_time}}</td>
            <td>**{{audit.audit_user_fk}}**</td>   **<--I need the name not the ID here**             
        </tr>            
    </tbody>
</table>

Мои Apis:

AUDIT
[
    {
    "audit_id": "1",
    "audit_date_time": "2016-01-28 12:46:20",
    "audit_user_fk": "97"
    }
]

USER
[
    {
    "user_id": "97",
    "user_full_name": "Mr.User",        
    }
]

Контроллер, который отлично работает. Получает данные из каждого API:

app.controller('auditControl', ['$scope','auditService', 'userService', function ($scope, auditService, userService) {  
    var auditLogs = auditService.query(function () {
        $scope.audit.data = auditLogs;
    });
    var user = userService.query(function () {
        $scope.auditUser = user;
    });        
}]);

Поэтому моя основная проблема, с которой я сталкиваюсь, заключается в получении имени пользователя в таблице вместо значения внешнего ключа. Я убрал много всего, поэтому мы можем сосредоточиться на главной проблеме. Получение имени пользователя из пользовательского API на основе FK в API аудита и повторение на основе элементов в API аудита.

Любая помощь очень ценится и извиняется за вопрос о нобе!

Rob Owl 28 янв. 2016, в 17:21

Источник

Теги:

javascript

angularjs

api

foreign-keys

ngresource

2 ответа

1

Вы могли бы сделать что-то вроде этого:

контроллер:

app.controller('auditControl', ['$scope','auditService', 'userService', function ($scope, auditService, userService) {  
var auditLogs = auditService.query(function () {
    $scope.audit.data = auditLogs;
});
var user = userService.query(function () {
    $scope.auditUser = user;
});
$scope.getUserName = function (id) {
  var result = $scope.users.filter(function( user ) {
    return user.user_id == id;
  });
  if (angular.isDefined(result) && result.length > 0) {
    return result[0].user_full_name;
  } else {
    return "--";
  }
}
}]);

HTML

<table>
<thead>
    <tr>                
        <th>
            Date/Time
        </th>
        <th>
            User
        </th>                
    </tr>
</thead>
<tbody>           
    <tr ng-repeat="audit in audit.data">
        <td>{{audit.audit_date_time}}</td>
        <td>**{{getUserName(audit.audit_user_fk)}}**</td>   **<--I need the name not the ID here**             
    </tr>            
</tbody>
</table>

Я не знаю, где находится массив пользователей, поэтому я назвал $ scope.users.

Miguel A. Baldi Hörlle 28 янв. 2016, в 15:21

1

Это работает Мигель, спасибо. Я собираюсь работать с опцией фильтра ниже, так как она кажется более гибкой и многократно используемой, но, на самом деле, спасибо за это. Это пригодится.
Rob Owl 29 янв. 2016, в 09:32

Ещё вопросы

Это работает Мигель, спасибо. Я собираюсь работать с опцией фильтра ниже, так как она кажется более гибкой и многократно используемой, но, на самом деле, спасибо за это. Это пригодится.

georgeawg · Accepted Answer · 2016-01-28T15-04-00.000Z

Создайте собственный фильтр.

app.filter("lookupUser", function() {
    function lookup (idNum, userList) {
        var userName = "UNKNOWN";
        angular.forEach(userList, function(user) {
            if ( user.user_id == idNum ) {
                 userName = user.user_full_name;
            };
        });
        return userName;
    };
    return lookup;
});

Затем в вашем шаблоне:

    <tr ng-repeat="audit in audit.data>
        <td>{{audit.audit_date_time}}</td>
        <td>{{audit.audit_user_fk | lookupUser : auditUser }}</td>             
    </tr>

Спасибо, Джордж. Это работает удовольствие!