表格在angularjs中没有绑定答案

【问题标题】：table is not binding in angularjs表格在angularjs中没有绑定
【发布时间】：2017-04-22 13:31:52
【问题描述】：

大家好，我正在尝试在 angulajs 中绑定表格。我正在从表中的数据库获取数据并尝试填充该表。在这里我做到了

$scope.getPageDetails = function () {
    $http.get('/api/privilege/getpagedetails/')
        .success(function (data, status) {
            $scope.Page = data;
            console.log($scope.Page);
        }).error(function () {
        });
}

然后我在定义为$scope.Page = []; 的 $scope.Page 中获取数据，这里我附上我在 $scope.page 中获取数据的控制台图像

这是我的桌子

<table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>
                                ID
                            </th>

                            <th>
                                PageName
                            </th>

                            <th>
                                PageUrl
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="Page in Pages">
                            <td>{{Page.id}}</td>
                            <td>{{Page.pageName}}</td>
                            <td>{{Page.pageUrl}}</td>
                            <td>
                                <input type="checkbox"  value="Edit" />
                            </td>
                        </tr>
                    </tbody>
                </table>

请在我想念的地方提供帮助，我将非常感谢你们。

【问题讨论】：

$scope.Page 应该是$scope.Pages

标签： javascript jquery html angularjs ajax

【解决方案1】：

在您看来，您正在迭代 Pages，但我没有看到它在您的控制器中定义。

改变

$scope.Page = data;

到

$scope.Pages = [data];

最终代码 HTML：

<table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>
                            ID
                        </th>

                        <th>
                            PageName
                        </th>

                        <th>
                            PageUrl
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="Page in Pages">
                        <td>{{Page.id}}</td>
                        <td>{{Page.pageName}}</td>
                        <td>{{Page.pageUrl}}</td>
                        <td>
                            <input type="checkbox"  value="Edit" />
                        </td>
                    </tr>
                </tbody>
            </table>

控制器：

$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
    .success(function (data, status) {
        $scope.Pages = [data];
    }).error(function () {
    });

}

编辑：如果你的数据是一个对象，让它成为一个数组，所以 ng-repeat 可以迭代它

【讨论】：

在 n-repeat 中我应该做什么
如果您在控制器中指向正确的引用（更改 $scope.Pages = data;），则无需对 ng-repeat 进行任何操作。 Angular 将完成剩下的工作
Not woking 先生，我将页面更改为页面，但未在 ng-repeat 中绑定
data 的内容是什么，如果它只是一个对象，您可以将它包装在一个数组中，因为 ng-repeat 使用类似$scope.Pages = [data]; 的数组才能工作，但如果这会仅在我看不到使用 ng-repeat 的情况下使用，您可以使用对象构建表。
我做了这个 {{Pages.id}} {{Pages.pageName}} {{Pages.pageUrl}} 但这是不绑定..

【解决方案2】：

$scope.getPageDetails = function () {
    $http.get('/api/privilege/getpagedetails/')
        .success(function (data, status) {
            $scope.Pages = data; //change page to pages in whole code,  
                                 //no need to change any thing in html page
            console.log($scope.Pages);
        }).error(function () {
        });
}

【讨论】：

你在这里得到的是一个普通的对象，只有一个键和一个值 json。
ng-repeat 作用于对象数组。在这里您可以直接将 $scope 与视图绑定。
$scope.getPageDetails = function () { $http.get('/api/privilege/getpagedetails/') .success(function (data, status) { $scope.Page = data; / /sorry don't change here remove ng- //repeat from the html file console.log($scope.Page); }).error(function () { }); }
ID PageName PageUrl th>

{{Page.id}} {{Page.pageName}} {{Page .pageUrl}}
@Gaurav_0093 在 td 标签中使用 ng-model 就像

ID	PageName	PageUrl th>
{{Page.id}}	{{Page.pageName}}	{{Page .pageUrl}}

【解决方案3】：

将$scope.Page = data 更改为$scope.Pages = data。

【讨论】：

是的，我根据你改变了它，但我应该在 ng-repeat 中做什么

【解决方案4】：

$scope.Page in controller vs Pages in your HTML ng-repeat binding，你需要写$scope.Pages :)

【讨论】：