使用 AngularJS 在 html.index 中绑定数据值时出错

Question

我正在使用AngularJS，但我无法使用angular的ng-repeat填充index.view中的数据。

我将留下代码片段以获得任何帮助。

请记住，我

有http 200请求的状态正常，只是当我连接屏幕上的数据时，我无法填充。

注册控制器.js

angular.module('Application').controller('registerController', 
function($scope,            
$http, registerService) {
$scope.registerUser = {};    
$scope.GetAllRegisters = function () {
    var registerServiceCall = registerService.GetRegisters();
    registerServiceCall.then(function (results) {
        $scope.registers = results.data;
    }, function (error) {
        $log.error('ERRO');
    });
};

$scope.GetAllRegisters();
});

我的服务.js

angular.module('Application').factory('registerService', function ($http) {
return {
    GetRegisters: function () {
        return $http({
            method: 'Get',
            url: "http://localhost:51734/api/UserAPI"
        })
    },
};
});

还有我的索引.html

 <div class="row" style="">
    <table class="table table-striped" style="">
        <tbody>
            <tr>
                <th style="display:none">Id</th>
                <th>Nome</th>
                <th>Sobrenome</th>
                <th>Ativo</th>
                <th>Email</th>
                <th>Editar</th>
                <th>Remover</th>
            </tr>
            <tr ng-repeat="registerUser in registers" style="word-wrap: break-word;">
                <td style="display:none">{{registerUser.UserId}}</td>
                <td>{{registerUser.Name}}</td>
                <td>{{registerUser.LastName}}</td>
                <td><input type="checkbox" ng-model="registerUser.IsActive" disabled /></td>
                <td>{{registerUser.Email}}</td>
                <td>
                    <a href="" ng-click="" class="glyphicon glyphicon-edit"></a>
                <td>
                    <a href="" ng-click="" class="glyphicon glyphicon-trash"></a>
                </td>

            </tr>
        </tbody>
    </table>

任何帮助或建议将不胜感激。谢谢

Answer 1

页面

加载后$scope.registers是什么？

就目前而言，您的表格将无法正确呈现，因为您无法在 tr 上使用 ng-repeat，因为它将作为块级元素插入，这会炸毁您的表格。但是，数据仍应插入表上方。您必须在自定义指令上调用 ng-repeat 才能正确呈现表。像这样：

 <register-user-row ng-repeat="registerUser in registers"><register-user-row>

然后在指令中：

angular.module('Application').directive('regusterUserRow', function() {
  return {
    templateUrl: "directive path here",
    restrict: "E",
    scope: true
  }
})

以及该指令的 html：

<tr style="word-wrap: break-word;">
  <td style="display:none">{{registerUser.UserId}}</td>
  <td>{{registerUser.Name}}</td>
  <td>{{registerUser.LastName}}</td>
  <td><input type="checkbox" ng-model="registerUser.IsActive" disabled /></td>
  <td>{{registerUser.Email}}</td>
  <td>
    <a href="" ng-click="" class="glyphicon glyphicon-edit"></a>
  </td>
  <td>
    <a href="" ng-click="" class="glyphicon glyphicon-trash"></a>
  </td>
</tr>

注意：在 中的第一个链接之后，您还缺少关闭。