2017-02-22 79 views
-2

所以我开始了解angularJS今天,我也创建了一个演示代码。 不知何故代码没有运行。我从某处复制此代码并更改为我的名字。运行后的HTML。代码显示{{CU.name}}可以通过角度Js和MVC逐步提取数据来给出一个好的链接或简单的示例代码?AngularJS与MVC控制器指南需要

<script> 
var TestCtrl = function ($scope, $http) { 

    $scope.firstCall = function() { 

     $http({ 
      url: "@Url.Action("RetriveRecordList", "recordController")", 
      dataType: 'json', 
     method: 'GET', 
     data: '', 
     headers: { 
      "Content-Type": "application/json" 
     } 
    }).success(function (response) { 
     debugger; 
     alert("haha") 
     $scope.DemoList = response; 
    }) 
     .error(function (error) { 
      alert(error); 
     }); 
} 
} 

<div ng-controller="TestCtrl" ng-init="firstCall()"> 

<div class="table-responsive com-table"> 

    <table class="table table-bordered table-hover table-striped"> 
     <thead> 
      <tr> 
       <th width="5%">Customer ID</th> 
       <th width="15%">Customer Name</th> 
       <th width="15%">Email</th> 
       <th width="20%">Mobile No.</th> 
       <th width="25%">Address</th> 
       <th width="20%">Registration Date</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="CU in DemoList"> 
       <td width="5%">{{CU.name}}</td> 
       <td width="15%">{{CU.name}}</td> 
       <td width="15%">{{CU.name}}</td> 
       <td width="20%">{{CU.name}}</td> 
       <td width="25%">{{CU.name}}</td> 
       <td width="20%">{{CU.name}}</td> 
      </tr> 
     </tbody> 
    </table> 

    <div class="collapse"> 
     <div class="well"> 
     </div> 

    </div> 
</div> 
</div> 

回答

0
angular.module('ngSampleApp', []).controller('TestCtrl', `function($scope) {` 

}); 

首先你要参考角框架为你的应用程序。然后定义模块和控制器。之后在HTML文件中使用ng-app指令引用模块名称。

+0

所以是必须的,以限定NG-应用?[链接] http://www.c-sharpcorner.com/UploadFile/cd7c2e/show-data-in-grid-format-using-angularjs-and-web-api/这个链接的例子还没有ng-app也是 –

+0

是的角度应用程序必须具有模块,并使用html进行引用ng-app指令 – kamprasad

1

在html中定义ng-app并在js文件中定义模块。当您定义$http属性时,还要添加逗号和:

$http({ 
    url: "@Url.Action(", 
    RetriveRecordList: ", ", 
    recordController: ")", 
    dataType: 'json', 
    method: 'GET', 
    data: '', 
    headers: { 
     "Content-Type": "application/json" 
    } 
}) 

赶上响应使用then代替success。它从角版本6.1.1除去

angular.module('app',[]) 
 
.controller('TestCtrl',TestCtrl); 
 

 
function TestCtrl($scope, $http) { 
 
\t $scope.firstCall = function() { 
 
\t \t $http({ 
 
\t \t \t \t url: "@Url.Action(", 
 
\t \t \t \t RetriveRecordList :", ", 
 
\t \t \t \t recordController :")", 
 
\t \t \t \t dataType: 'json', 
 
\t \t \t \t method: 'GET', 
 
\t \t \t \t data: '', 
 
\t \t \t \t headers: { 
 
\t \t \t \t \t "Content-Type": "application/json" 
 
\t \t \t \t } 
 
\t \t \t }).then(function(response) { 
 
\t \t \t \t debugger; 
 
\t \t \t \t alert("haha") 
 
\t \t \t \t $scope.DemoList = response; 
 
\t \t \t },function(error) { 
 
\t \t \t \t alert(error); 
 
\t \t \t }) 
 
\t } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="TestCtrl" ng-init="firstCall()"> 
 

 
<div class="table-responsive com-table"> 
 

 
    <table class="table table-bordered table-hover table-striped"> 
 
     <thead> 
 
      <tr> 
 
       <th width="5%">Customer ID</th> 
 
       <th width="15%">Customer Name</th> 
 
       <th width="15%">Email</th> 
 
       <th width="20%">Mobile No.</th> 
 
       <th width="25%">Address</th> 
 
       <th width="20%">Registration Date</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="CU in DemoList"> 
 
       <td width="5%">{{CU.name}}</td> 
 
       <td width="15%">{{CU.name}}</td> 
 
       <td width="15%">{{CU.name}}</td> 
 
       <td width="20%">{{CU.name}}</td> 
 
       <td width="25%">{{CU.name}}</td> 
 
       <td width="20%">{{CU.name}}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <div class="collapse"> 
 
     <div class="well"> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
</div>