2016-07-24 8 views
0

Ich versuche, Datensätze über Ajax zu holen und mit AngularJS anzuzeigen. Aber mein Code sogar nicht Controller-Aktion aufrufen.Schleifen von Json-Daten mit AngularJS in Asp.net MVC

ich diesen Code versuchen ..

<div ng-controller="MyCtrl"> 
<div ng-repeat="result in products"> 
    {{result.ProductName}} 
</div> 
</div> 

Ajax:

function MyCtrl($scope) { 
    $.ajax({ 
    url: "/Products/Get/", 
    type: "POST", 
    success: function (data) { 
     // Success message 
     var myApp = angular.module('myApp', []); 
     $scope.products = data; 
    }, 
    error: function() { 
     // Fail message 
    }, 
    }); 
} 

ich this post bin mit, damit es funktioniert.

+0

Sie haben keine Controller 'MyCtrl' –

Antwort

2

Ihre Vorgehensweise ist falsch. Sie sollten die Controller-Direktive von angularJS verwenden, um Dienste zum Verbrauch von Json-Daten aufzurufen.

<script type="text/javascript"> 
    var app = angular.module('myApp', []); 
    app.controller('MyCtrl', function ($scope, $http) { 
     $http.get('/Products/Get/').success(function (data) { 
      $scope.products = data; 
     }); 
    }); 
</script> 

Ich hatte einen Artikel vor ein paar Tagen auf dem gleichen geschrieben. Sie können here gehen. Dies könnte hilfreich sein.

+0

Seit' success' ist * veraltet * sollten Sie 'then' anstelle von 'Erfolg'. – developer033

0

Sie brauchen module Namen in AngularJS erklären, und vergessen Sie nicht, Modulnamen in Sie Körper oder html tag..like dieser <body data-ng-app="app"> und versuchen Sie dann wie folgt hinzuzufügen:

wie diese
<script> 
var app = angular.module('app',[]); 

app.controller('MyCtrl',function($scope,$http){ 

bindData(); 
function bindData(
    // it will be nice, if this code your separate to file service...  
    $http.get('/Products/Get').success(function (callBack) { 
      $scope.products = callBack.data; 
    }); 
); 
}); 

</script> 

und beste Umsetzung:

// in controller, injected you service name like this.. 
app.controller('MyCtrl',function($scope,$http ,myServices){ 

bindData(); 
function bindData(
    var promiseGet = myServices.GetAll(); 
    promiseGet.then(function(callBack){ // success 
    $scope.products = callBack.data; 

    }  
,function(error){ // error 
    console.log(error); 
    }); 
);  

});

app.service('myServices',function($http){ 
var vm = this; 
vm.GetAll = function(){ 
     return $http.get('/Products/Get'); 
    } 
}); 

und geben nicht POST, wenn Sie in Ajax-Funktion Get Daten wollen ..