Angularjs在表

Question

我想在表格中显示数组中的数据。

这就是我所拥有的：

controllers.js：

app.controller('DriverController', ['$scope', '$http',
    function ($scope, $http) {

        //Defining the $http service for getting the sources
        $http({
            method: 'GET',
            url: '/Driver/GetDrivers'
        }).
        success(function (data) {
            $scope.drivers = data;
        });
    }]);

我得到的数据：

HTML标记：

<table ng-controller="DriverController">
                    <thead>
                    <th>
                        Name
                    </th>

                    </thead>
                    <tbody ng-repeat="driver in Drivers">
                        <tr>
                            <td>
                                {{driver.FirstName}}
                            </td>

                        </tr>

                    </tbody>
                </table>

最终结果：

更新

我也试过这个，只是为了看看角度是否正确连接：

app.controller('DriverController', ['$scope', '$http',
    function ($scope, $http) {

        //Defining the $http service for getting the sources
        $http({
            method: 'GET',
            url: '/Driver/GetDrivers'
        }).
        success(function (data) {
            $scope.Drivers = data;
            $scope.Test = "testt";
            console.log('data retrieved');
            console.log($scope.Drivers);
        });

    }]);

我更新了视图：

@using ui.ViewModels
@model DriversViewModel

@{
    ViewBag.Title = "Drivers List";
}


@using (Html.BeginForm())
{
    <div data-ng-app="app">
        <section class="panel">
            <header class="panel-heading">
                <div class="panel-actions">
                    <a href="#" class="panel-action panel-action-toggle" data-panel-toggle></a>
                    <a href="#" class="panel-action panel-action-dismiss" data-panel-dismiss></a>
                </div>

                <h2 class="panel-title">Drivers List</h2>
            </header>
            <div class="panel-body" data-ng-controller="DriverController">
                <p>{{Test}}</p>
                <table class="table table-no-more table-bordered table-striped mb-none">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th class="hidden-xs hidden-sm">First Name</th>
                            <th class="text-right hidden-xs hidden-sm">Middle Name</th>
                            <th class="text-right">Last Name</th>
                            <th class="text-right">Party</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var p in Model.Drivers)
                        {
                            <tr>
                                <td data-title="Code">@p.Id</td>
                                <td data-title="Company" class="hidden-xs hidden-sm">@p.FirstName</td>
                                <td data-title="Change" class="text-right hidden-xs hidden-sm">@p.MiddleName</td>
                                <td data-title="Price" class="text-right">@p.LastName</td>
                                <td data-title="Change %" class="text-right">@p.Party.Name</td>
                            </tr>

                        }

                    </tbody>
                </table>

                <table>
                    <thead>
                    <th>
                        Name
                    </th>

                    </thead>
                    <tbody>
                        <tr ng-repeat="driver in drivers">
                            <td>{{driver.firstName}}</td>
                            <td>{{driver.lastName}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </section>
    </div>

}

我也试过了一个简单的事情，比如<p>{{driver.Test}}</p>，但是你看不出有任何价值。

所以我认为角度和mvc app之间存在一些脱节，您认为我做错了什么？

Answer 1

您可以尝试在tr标签上添加ng-repeat而不是在tbody标签上。

编辑： 也许你忘了把ng-app放在桌子外面，这个小提琴起作用

https://jsfiddle.net/xy2y1b9y/

<div ng-app="app">
    <script>
        angular.module('app', [])
            .controller('DriverController', function($scope) {
            $scope.Drivers = [{
                FirstName: "first"
            }, {
                FirstName: 'second'
            }]
        })
    </script>
    <table ng-controller="DriverController">
        <thead>
            <th>Name</th>
        </thead>
        <tbody ng-repeat="driver in Drivers">
            <tr>
                <td>{{driver.FirstName}}</td>
            </tr>
        </tbody>
    </table>
</div>

（虽然ng-repeat的位置应该在tr标签上）

Answer 2

将ng-repeat放在表tr：

中

<table ng-controller="DriverController">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="driver in drivers">
            <td>{{driver.firstName}}</td>
            <td>{{driver.lastName}}</td>
        </tr>
    </tbody>
</table>