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

Posted 2023-04-13

【中文标题】使用 AngularJS 绑定 html.index 中的数据值时出错

【英文标题】：Error for bind data values in html.index with AngularJS

【发布时间】：2019-06-15 02:24:00

【问题描述】：

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

我会留下代码 sn-p 以获得任何帮助。

记住，我有http 200请求的状态ok，只是当我连接屏幕上的数据时，我无法填写。

registerController.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"
        )
    ,
;

);

还有我的 index.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>

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

【参考方案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>

注意：在 .

中的第一个链接之后，您还缺少一个结束

【讨论】：

我创建了指令，但我继续处理错误，我已经调试了 javascript controller.js 文件，它在我的服务中查找方法并返回 api 结果，但是当它连接到表时数据库中已经存在的数据，在我的视图中的列表中，我没有得到任何

你已经弄清楚了吗？有很多问题可能导致这种情况。如果您在服务方法中记录实际响应，响应是否包含正确的数据？如果是这样，则断开连接是在角度服务和控制器之间，如果不是，则断开连接与您的后端有关。