首页 > 解决方案 > 角度js ng-repeat不起作用

问题描述

在 ng-repeat 中不显示任何数据,但数据可用于响应。循环不能正常工作。

     <html>
            <head></head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


        <body ng-app="myApp">

        <div  ng-controller="thecontroller">


    <form>
       <tr ng-repeat="x in names">
          <td>{{x.name}}</td>
          <td>{{x.email}}</td> 
         <td>{{x.passward}}</td> 
      </tr> 
    </form>
 </div> 
</body>

console.log(response) 在控制台中显示数据

    <script>
        var app = angular.module('myApp', []);
    app.controller('thecontroller', function($scope, $http) {


     $http.get("show.php")
        .then(function (response) {

          $scope.names=response.data;
          console.log(response) 
         } );   
    });
        </script>

</html>

标签: angularjs-ng-repeat

解决方案


因此,我尝试了您的代码并进行了一些更正,您看不到任何数据的原因可能是由于使用trandtd没有table标签作为父标签的标签,请检查我的以下代码,我在其中添加了tableandtbody标签, 另外,为了模拟一个http请求,我使用了$timeout3 秒后设置数据的,请研究示例并将其实现到您的代码中!

var app = angular.module('myApp', []);
app.controller('thecontroller', function($scope, $http, $timeout) {
  var data = [{
    name: "one",
    email: "one@one.com",
    password: "1234"
  }, {
    name: "two",
    email: "two@two.com",
    password: "1234"
  }, {
    name: "three",
    email: "three@three.com",
    password: "1234"
  }, ]
  $timeout(function() {
    $scope.names = data;
  }, 3000);
  /*$http.get("show.php")
    .then(function(response) {

      $scope.names = response.data;
      console.log(response)
    });*/
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="thecontroller">
    <form>
      <table>
        <tbody>
          <tr ng-repeat="x in names">
            <td>{{x.name}}</td>
            <td>{{x.email}}</td>
            <td>{{x.password}}</td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</body>

</html>


推荐阅读