Question

我最近问过一个问题，建议我开始使用 AngularJS 来动态创建表格。不幸的是，我不知道 AngularJS （或根本没有编码），并且正在遵循导致代号弃用的教程。基本上，根据我的收集，$http中使用的成功和错误方法应该用.then()方法替换。正如我的代码目前所代表的那样，我所归还的只有：{{ cribs | json }}。

我的HTML代码：

<html>
<head>
    <meta charset="utf-8">
    <title>ng-cribs Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>    
  <body ng-app="ngCribs" ng-controller="cribsController">
      <h1>Testing</h1>
      </br>
      <div class="well" ng-repeat="crib in cribs">
          <h3> {{ crib.name }} </h3>
          <p><strong>Contact Number: </strong>{{ crib.contactNumber }}</p>
          <p><strong>Email Address: </strong>{{ crib.email }}</p>
          <p><strong>Pass Number: </strong>{{ crib.passNumber }}</p>
      </div>
      <pre>{{ cribs | json }}</pre>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
  <script src="app.js"></script>
  <script src="scripts/cribsController.js"></script>
  <script src="scripts/cribsFactory.js"></script>    
</html>

我的js代码（在同一目录中）：

angular.module('ngCribs', ['ui.bootstrap']);

我的AngularJS工厂代码（在“脚本”子文件夹中）：

angular
    .module('ngCribs')
    .factory('cribsFactory', function($http) {
        function getCribs() {
            return $http.get('data/data.json');
        }

        return {
            getCribs: getCribs
        }
    });

我的AngularJS控制器代码（也在“scripts”目录中）：

angular
    .module('ngCribs')
    .controller('cribsController', function($scope, cribsFactory){
        $scope.cribs;

        cribsFactory.getCribs().success(function(data) {
            $scope.cribs = data;
        }).error(function(error) {
            console.log(error);
        });

        // $scope.hello = 'Hello wo!';
    });

我的JSON文件（在一个名为“data”的单独目录中）：

[
    {
      "name": "Joel Doe",
      "dob": "17-03-1994",
      "houseNumber": "31",
      "postcode": "LS4 2RS",
      "contactNumber": "07941405771",
      "email": "joeldoe@outlook.com",
      "passNumber": "01",
    },
    {
      "name": "Harry Doe",
      "dob": "21-04-1992",
      "houseNumber": "43",
      "postcode": "LS2 1DH",
      "contactNumber": "0797651387",
      "email": "harrydoe@outlook.com",
      "passNumber": "02",
    },
    {
      "name": "Jane Doe",
      "dob": "19-12-1993",
      "houseNumber": "65",
      "postcode": "LS1 6EK",
      "contactNumber": "07979804398",
      "email": "janedoe@outlook.com",
      "passNumber": "03",
    },
]

我还添加了指向我的代码的链接：http://codepen.io/anon/pen/yVyXzp

Answer 1

根据文件https://docs.angularjs.org/api/ng/service/ $ http

cribsController 中的代码应更改为

@import

Answer 2

您在代码中遇到的问题很少，所以我也对它们进行了改进。

工作代码 - http://plnkr.co/edit/TM8jYldnE6DCquemSkX7?p=preview

代码 -

angular
  .module('ngCribs')
  .controller('cribsController', function($scope, cribsFactory){

      $scope.cribs = {};
      cribsFactory.getCribs().then(function(data) {  
          $scope.cribs = data.data;
        }, function(error) {
          console.log(error); // Handle the error here
      })
})

我加强了使其发挥作用的事情 -

清除JSON以进行验证，请检查它是否无效。
在<script>。

index.html

添加了then()的错误处理代码。
最好只在$scope.cribs开始时初始化范围变量。

如有任何疑问，请与我们联系。

使用AngularJS创建动态表 - 需要从成功/错误方法到.then（）方法的帮助

2 个答案: