AngularJS 中不显示数据答案

【问题标题】：Data doesn't show in AngularJSAngularJS 中不显示数据
【发布时间】：2015-09-24 06:09:12
【问题描述】：

首先我要为我的英语不好道歉:)

当我想从数据网格加载模式时，我遇到了 AngularJS 的问题。

这是我的网格代码：

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit track by $index">
                    <td>{{data.lastName}} {{data.firstName}}</td>
                    <td>{{data.email}}</td>
                    <td>{{data.phoneNumber}}</td>
                    <td>{{data.cityID}}</td>
                    <td><button class="btn btn-primary btn-xs" ng-click="show(data.id)">DETAILS</button></td>

模式代码：

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title"><strong>{{row.firstName}} {{row.lastName}}</strong> Details</h4>
  </div>
  <div class="modal-body">
    <table class="table table-condensed table-hover info-table">
      <tbody>
        <tr>
          <td>Email:</td>
          <td>{{row.email}}</td>
        </tr>
     </tbody>
    </table>
  </div>
</div>

和JS代码：

$scope.show = function (id) { 
    $http.get('inc/getDetails.php?id='+id).
    success(function(data) {
      $scope.row = data;
      $('#det-modal').modal('show');

    });

};

模态正在加载，但不加载数据。

【问题讨论】：

强烈建议去掉bootstrap.js，改用angular-ui-bootstrap
您检查过响应中的数据吗？在浏览器开发者控制台的“$scope.row = data;”处放置一个断点行，并查看数据是否符合您期望的格式（它必须是格式为 {firstName:"Name", lastName:"LastName", email:"email@....com"} 的对象）跨度>
虽然在控制器中调用 jquery 这不是使用 angularjs 的正确方法，但我认为这不是问题的原因。此处的 JsFiddle jsfiddle.net/8wf17mmg 表明它可以工作，即使“概念上”不正确。
@StefanoCastriotta 谢谢我现在会看到代码...数据格式良好，json ...
“但不加载数据”是什么意思？您是否看到空白值或 angularjs 占位符？ ({{row.email}})。模态 div 放在哪里？（它必须在“ng-controller”内，否则超出范围）

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

代码不起作用，因为当模态在非角度世界中被调用时，row 变量超出范围。

您不应直接在控制器中访问 DOM 元素，因此不应在 angular world 中使用以下行。

 $('#det-modal').modal('show');

要解决此问题，请考虑使用 https://angular-ui.github.io/bootstrap/，这将使您能够将行作为范围变量传递。

【讨论】：

感谢您的回答，我会尝试这种方式...只是想知道如何:)