如何使用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();
          })
    };