Angular Directives - ng-repeat

Asked

Viewed 56 times

0

I have a project with C# Web and define that would use Angularjs, to recover the data from the Database.

The query is made in the database normally the object is recovered in the javascript of the Getalldata class I defined. But in the interface when using ng-repeat to present the data it presents blank lines and in different quantity than I have in the database. below follows the excerpt of the methods I created.

In HTML, only the buttons appear. debugging in the browser realize that the data is located. If you can help me or indicate a material. I confess that my touch with angular is very basic.

-> C#

// AreaComum
    public JsonResult GetallDados ()
    {
        var areacomum = db.AreasComuns.ToList();
        return Json(areacomum, JsonRequestBehavior.AllowGet);
        //return Json(db.AreasComuns.ToList());

    }

-> JAVASCRIPT

var CondominioAreaComumApp = angular.module('CondominioAreaComumApp', []);
CondominioAreaComumApp.controller('AreaComumController', ['$scope', '$http', function ($scope, $http) {
    //debugger;

    $scope.nomeListaAreas = 'Lista de Areas Comuns';

    $scope.areacomum = [];
    $scope.GetAllAreaComum = function () {
        $http({
            method: "get",
            url: "/AreaComum/GetAllAreaComum"
        }).then(function (data) {
            debugger;
            $scope.areacomum = data;
        }, function (result) {
            //console.log(result);
            alert("Ocorreu um Erro ");
        })
    };

-> HTML {{ nomeListaAreas }}

        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td>
                    <b>ID</b>
                </td>
                <td>
                    <b>Descrição</b>
                </td>
                <td>
                    <b>Actions</b>
                </td>
            </tr>
            <tr ng-repeat="item in areacomum">
                <td>
                    {{item.ID}}
                </td>
                <td>
                    {{item.AreaComumDescricao}}
                </td>
                <td>
                    <input type="button" class="btn btn-warning" value="Atualizar" ng-click="UpdateUsu(item)" />
                    <input type="button" class="btn btn-danger" value="Excluir" ng-click="DeleteUsu(item)" />
                </td>
            </tr>
        </table>
    </div>
</div>
angularjs web-application

1 answer

0

I believe your problem is here:

$scope.areacomum = data;

The fact is that to recover the data from the request response it is necessary to access the property date, parameter that is injected into the service then http angular. Right would then be something like:

$scope.areacomum = data.data;

Follow the link of the documentation of the angle below:

https://docs.angularjs.org/api/ng/service/$http#$http-Returns

Browser other questions tagged angularjs web-application

You are not signed in. Login or sign up in order to post.