Как получить данные из двух таблиц с помощью Angular и отобразить их в HTML?

Question

Я хочу отобразить два столбца из двух разных таблиц. У меня есть таблицы "офисы" и "cash_desks" Таблица "офисы" имеет столбец "имя", который я хочу отобразить. В таблице «cash_desks» есть столбцы «name» и «office_id» (что относится к идентификатору офиса). Я хочу отобразить название офиса и название cash_desks в таблице HTML. Вот мой HTML-код:

<table class="table">
    <tr ng-repeat="cash_desks in items" ng-click="editItem(cash_desks)">
        <td>{{cash_desks.name}}</td>
        <td>{{offices.name}}</td>
    </tr>
</table>
<label><input type="checkbox" ng-model="myVar">Редактирай офис</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(cash_desksForm.$valid)" name="cash_desksForm">
<div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="offices_name">Код на валута</label>
                <input type="text" class="form-control" required ng-model="activeItem.name" placeholder="Офис.." />
            </div>

            <div class="form-group">
                <label for="value_name">Локация на офис</label>
                <input type="text" class="form-control" id="password" ng-model="activeItem.location"  />
            </div>

        </div>
    </div>
    <button class="btn btn-primary" ng-disabled="cash_desksForm.$invalid" type="submit">Save</button>
    <!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>

И угловой код:

app.controller("CashDesksCtrl", function($rootScope, $scope){
    $scope.items = [];
    $scope.editMode = false;
    $scope.activeItem = false;


    $scope.refresh = function () {
        $scope.items = [];
        window.defaultAdapter.query("SELECT offices.name,cash_desks.name FROM offices LEFT JOIN cash_desks ON offices.id = cash_desks.office_id LIMIT 8", { type: Sequelize.QueryTypes.SELECT})
          .then(cash_desks => {
            $scope.items = cash_desks;
            $scope.$apply();
          })
    };

Answer 1

У вас есть тот же ключ (имя) из вашего выбора, попробуйте использовать псевдоним, чтобы сделать их разными.

<table class="table">
    <tr ng-repeat="itemin items" ng-click="editItem(cash_desks)">
        <td>{{item.cash_desk_name}}</td>
        <td>{{item.office_name}}</td>
    </tr>
</table>
<label><input type="checkbox" ng-model="myVar">Редактирай офис</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(cash_desksForm.$valid)" name="cash_desksForm">
<div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="offices_name">Код на валута</label>
                <input type="text" class="form-control" required ng-model="activeItem.name" placeholder="Офис.." />
            </div>

            <div class="form-group">
                <label for="value_name">Локация на офис</label>
                <input type="text" class="form-control" id="password" ng-model="activeItem.location"  />
            </div>

        </div>
    </div>
    <button class="btn btn-primary" ng-disabled="cash_desksForm.$invalid" type="submit">Save</button>
    <!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>

app.controller("CashDesksCtrl", function($rootScope, $scope){
    $scope.items = [];
    $scope.editMode = false;
    $scope.activeItem = false;


    $scope.refresh = function () {
        $scope.items = [];
        window.defaultAdapter.query("SELECT offices.name as office_name,cash_desks.name as cash_desk_name FROM offices LEFT JOIN cash_desks ON offices.id = cash_desks.office_id LIMIT 8", { type: Sequelize.QueryTypes.SELECT})
          .then(cash_desks => {
            $scope.items = cash_desks;
            $scope.$apply();
          })
    };