CODEWITHSUNDEEP
javascriptangularjsasp.net-web-api
Vishal Mantri
Vishal Mantri

Reputation: 11

Not able to bind to ng-repeat

I have written a simple ASP.NET WEBApi which returns the list of customer and I am trying to bind to the UI.

Find below my WEB Api Controller:

    public class DummyController : ApiController
    {
        public HttpResponseMessage Get()
        {
            List<Customer> customers = new List<Customer>();
            Customer customer = new Customer();
            customer.FirstName = "John";
            customer.LastName = "Doe";
            customers.Add(customer);
            customer = new Customer();
            customer.FirstName = "Mike";
            customer.LastName = "Doobey";
            customers.Add(customer);

            HttpResponseMessage result = null;
            result = Request.CreateResponse(HttpStatusCode.OK, customers);
            return result;
        }
    }

Angular Controller:

<script type="text/javascript">
    function dummyCtrl($scope) {
        $.getJSON("http://127.0.0.1:81/Api/dummy", function (resp) {
            $scope.dummy = resp;
            $scope.json = angular.toJson(resp);
            console.log($scope.json);
        });
    }
</script>

Executing the Angular Controller:

<body ng-controller="dummyCtrl">
    <div>
        <ul>
    <li ng-repeat = "person in dummy">
        <span>{{person.FirstName}}</span>
        <span>{{person.lastname}}</span>
    </li>
        </ul>
    </div>
</body>

I am able to see the JSON data in Chrome Dev Tools but not able to see the output in browser.

[{"FirstName":"John","LastName":"Doe"},{"FirstName":"Mike","LastName":"Doobey"}] :81/:24
[{"FirstName":"John","LastName":"Doe"},{"FirstName":"Mike","LastName":"Doobey"}] :81/:24

What am I doing wrong?

Upvotes: 1

Views: 2210

Answers (1)

alex3683
alex3683

Reputation: 1565

You should use angularJS' own Wrapper around XmlHTTPRequest which does a $digest automatically. So change your code to this:

function dummyCtrl($scope, $http) {
    $http.get("http://127.0.0.1:81/Api/dummy").then( function (resp) {
        $scope.dummy = resp.data;
        $scope.json = angular.toJson(resp.data);
        console.log($scope.json);
    });
}

See here for more information: Angular $http reference

Upvotes: 4

Related Questions