Отображение JsonResult с Angular.js

Question

Я знакомлюсь с angular.js и кажется довольно простым возвратом Json Data из файла с помощью $Http.Get.

В качестве примера я бы получить мои данные JSON, как этот

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

    artistControllers.controller('ListController', function ($scope, $http) { 
    $http.get('json/jsonAngular.txt').success(function (data) { 
    $scope.artists = data; 
    }); 
}); 

Как бы я получить JsonResult и присвоить это моим $ scope.artists, например.

[HttpPost] 
    public JsonResult GetArtists() 
    { 
     ViewModel model = new ViewModel(); 
     model.GetArtists(); 
     return Json(new 
     { 
      Artists = model.Artists 
     }); 
    } 

где мой класс будет выглядеть как пример

public class Artist 
{ 
    public string Initial { get; set; } 
    public string Surname { get; set; } 
} 

Есть ли возможно рабочий пример, где я мог бы вернуть JsonResult и сделать это в моем HTML.

Answer 1

Это будет как:

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

artistsApp.controller('ListController', function ($scope, $http) { 
    $http.get('api/getartists').success(function (data) { 
     $scope.artists = data.artists; 
    }); 
}); 

<ul> 
    <li ng-repeat="artist in artists">{{ artist.Surname }}</li> 
</ul> 

Если JSON/jsonAngular.txt возвращается ваш JSON затем остальную часть вашего кода код. вы можете просто получить доступ к нему в ng-repeat, как указано выше.

Также помните, что вам нужно связать свое мнение с вашим контроллером. Обычно это делается в разделе конфигурации приложения app.js.

$routeProvider 
      .when('/', { 
       controller: 'artistControllers', 
       templateUrl: 'artists.html' 
      }) 

Примечание: Это лучшая практика абстрагировать из доступа к данным из контроллера в сервис, поэтому вы можете использовать ваши вызовы доступа к данным.

Answer 2

Вместо $scope.artists = data; вы хотите $scope.artists = data.artists;