mysql - 如何使用 Angular 从两个表中获取数据并以 HTML 形式显示它们？

Question

我想显示两个不同表中的两列。我有表“offices”和“cash_desks”表“办公室”有我想显示的“名称”列。表“cash_desks”具有列“name”和“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>

和 Angular 代码:

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 具有相同的 key (名称)，请尝试使用别名使它们不同。

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