NG-REPEAT无显示。即使成功解析了数据

时间:2017-06-24 11:30:55

标签: javascript php angularjs

Html代码:

<!DOCTYPE html>
<html ng-app="searching">
  <head>
    <meta charset="utf-8">
    <title>Angular_JS</title>
    <script type="text/javascript" src="Angular_JS/angular.min.js"></script>
    <script type="text/javascript" src="ctrl.js"></script>
  </head>
  <body ng-controller="Ctrl">
    <div>
      <table>
          <tr>
            <th>ID</th>
            <th>TITLE</th>
          </tr>
          <tr ng-repeat='entry in data'>
          <td>{{entry.id}}</td>
          <td>{{entry.title}}</td>
          </tr>
      </table>
    </div>
  </body>
</html>

ctrl.js

var myApp = angular.module('searching', []);

myApp.controller('Ctrl', ['$scope','$http', function($scope,$http) {
  console.log('Initiating Controller');
  $http.get('content.php').then(function successCallback(data) {
    $scope.entries = data;
    console.log(data);
  },function errorCallback(){
    alert("Error Occured");
  });
}]);

content.php

<?php
mysql_connect('localhost','root','');
mysql_select_db('ias');

  $q = "SELECT * FROM tbl_question_category";
  $res = mysql_query($q);

  while ($rows = mysql_fetch_assoc($res)) {
    $data[] = array('id'=>$rows['question_category_id'],'title'=>$rows['category_title']);
  }
  $jso1 = json_encode($data);
  print_r ($jso1);
?>

This will be the Result...Click to see the Image

但它在浏览器屏幕上没有显示任何内容...... This is the Browser output....Click to see the Image

我正在寻找好的答案......谢谢

4 个答案:

答案 0 :(得分:1)

您在视图中使用了不正确的范围属性

变化:

<tr ng-repeat='entry in data'>

<tr ng-repeat='entry in entries'>

使其与控制器中分配的$scope.entries相对应

答案 1 :(得分:1)

两件事:

$http.get()方法返回响应对象,而不是直接返回数据。所以ng-repeat指令实际上是试图迭代这个响应对象,而不是你的数据。

另一件事是你使用了错误的范围变量。您将数据分配给$scope.entries,但尝试在ng-repeat中迭代$scope.data

所以为了让它做你想做的事,你只需更改控制器并查看以下内容:

myApp.controller('Ctrl', ['$scope','$http', function($scope,$http) {
  console.log('Initiating Controller');
  $http.get('content.php').then(function successCallback(response) {
    $scope.entries = response.data;
    console.log(response.data);
  },function errorCallback(){
    alert("Error Occured");
  });
}]);


<tr ng-repeat='entry in entries'>
    <td>{{entry.id}}</td>
    <td>{{entry.title}}</td>
</tr>

答案 2 :(得分:0)

您将结果绑定到$ scope.entries并在ng-repeat中尝试迭代$ scope.data。

将控制器回调$ scope.entries更改为$ scope.data或更改数据中的视图更改ng-repeat =&#39;条目&#39;在条目&#39;

中输入ng-repeat =&#39;条目

答案 3 :(得分:0)

var myApp = angular.module(&#39; search&#39;,[]);

myApp.controller('Ctrl', ['$scope','$http', function($scope,$http) {
  console.log('Initiating Controller');
  $http.get('content.php').then(function successCallback(data) {
    $scope.entries = data.data;
    console.log(data);
  },function errorCallback(){
    alert("Error Occured");
  });
}]);
 <tr ng-repeat='entry in entries'>
          <td>{{entry.id}}</td>
          <td>{{entry.title}}</td>
          </tr>

请使用上面的代码。当您必须使用data.data

时,您正在使用数据