如何使用Angular從兩個表中獲取數據並以HTML顯示它們？

Question

我想顯示來自兩個不同表的兩列。 我有“辦公室”表和“ cash_desks”表“辦公室”有要顯示的“名稱”列。 表“ cash_desks”具有列“名稱”和“ office_id”（指辦公室ID）。 我想在HTML表中顯示辦公室名稱和cash_desks名稱。 這是我的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

您在select中有相同的鍵（名稱），請嘗試使用別名使它們有所不同。

<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();
          })
    };