Binding data with angular. (Calling method into a view)

Question

I want to bind some data with angular, I made an example and it works but I'm having problems to integrate my stuff into another app.

This is the controller of that app

angular.module('app', ['dcafe.navigation','ui.bootstrap'])

.controller('HeadlineReportController', function($scope, $http, $interpolate, $filter, datafactory, d3Factory, $timeout){

    //code

    $scope.SendData = function(){

        $http.post('http://localhost:8080/xxx/xxx/', data, config)

        .success(function (data, status, headers, config) {
            $scope.PostDataResponse = data;
            console.log("Success");
            console.log("Status code: " + status);

        })
        .error(function (data, status, header, config) {
            //$scope.ResponseDetails = "Data: " + data +
                console.log("Error");
                console.log("Status: " + status);
                console.log("Headers: " + header);
        });

    };
    $scope.SendData();

    //MORE CODE

});

I was working with the SendData() function that was inside a controller, in my view I used ng-controller and then the ng-repeat, but things are different in the second app.

They call the controller at the begining of the view like this:

<span ng-controller="HeadlineReportController as vm">

so I tried to do the ng-repeat like in my workig app, like this:

<tr ng-repeat="data in PostDataResponse.result"> </tr>

But as you can see in the controller above the $scope.SendData = function() {}

is part of the HeadlineReportController so in this case I dont know how to do my ng-repeat, I was thinking in something like this:

ng-repeat="data in SendData()"

But It's not working.

SendData() will not work because it is an async operation. What happens if you use extend instead of assigning such as angular.extend( $scope.PostDataResponse, data); Or $scope.ShowData = function() { return $scope.ResponseDetails; }; with ng-repeat="data in ShowData()"? — George Houpis
– George Houpis, Commented Jan 7, 2016 at 18:56

Rokoala · Accepted Answer · 2016-01-07 19:04:47Z

2

If you are using controller as syntax change $scope to 'this'

var self = this;
self.SendData = function(){

    $http.post('http://localhost:8080/xxx/xxx/', data, config)

    .success(function (data, status, headers, config) {
        self.PostDataResponse = data;
        console.log("Success");
        console.log("Status code: " + status);

    })
    .error(function (data, status, header, config) {
        //$scope.ResponseDetails = "Data: " + data +
            console.log("Error");
            console.log("Status: " + status);
            console.log("Headers: " + header);
    });

};
self.SendData();

And use your view model as declared on controller as

<tr ng-repeat="data in vm.PostDataResponse.result"> </tr>

answered Jan 7, 2016 at 19:04

Rokoala

4617 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kennechu Over a year ago

Thank's for your time. This work, In the console Im getting the success message that I log but for some reason It's not displaying the data. Im using "ng-bind" like this: <td ng-bind="data.merchMetrics.SALES_AMOUNT_LW" style="text-align: left"></td> Any idea of why is not displaying data?

kennechu Over a year ago

Something is weird :( This is how Im doing the binding: <tr ng-repeat="data in vm.PostDataResponse.result"> <td ng-bind="vm.data.merchMetrics.SALES_AMOUNT_LW"></td> </tr> But nothing is displayed on the screen

Rokoala Over a year ago

Sorry for my last comment... you don't need vm.data.merchMetrics.SALES_AMOUNT_LW <td ng-bind="data.merchMetrics.SALES_AMOUNT_LW" style="text-align: left"></td> is correct! you can try force $digest using $scope.$apply() on your success callback of $http.post

kennechu Over a year ago

heey! I add the $scope.$apply() in the success callback like this: .success(function (data, status, headers, config) { $scope.PostDataResponse = data;$scope.$apply(); console.log("Success"); }) But still getting no data in the view, the ws call is working because I can see the succes message in my console

Community · Accepted Answer · 2020-06-20 09:12:55Z

There are two ways of declare and use the controllers. From the ngController documentation

Two different declaration styles are included below:

one binds methods and properties directly onto the controller using this: ng-controller="SettingsController1 as settings"

one injects $scope into the controller: ng-controller="SettingsController2"

The second option is more common in the Angular community, and is generally used in boilerplates and in this guide. However, there are advantages to binding properties directly to the controller and avoiding scope.

You will need to change the code in your controller to the following:

angular.module('app',['dcafe.navigation','ui.bootstrap']).controller('HeadlineReportController',
 function($http,$interpolate,$filter,datafactory,d3Factory,$timeout){

//code
var vm = this;

$vm.SendData = function(){

    $http.post('http://localhost:8080/xxx/xxx/', data, config)

    .success(function (data, status, headers, config) {
        $scope.PostDataResponse = data;
        console.log("Success");
        console.log("Status code: " + status);

    })
    .error(function (data, status, header, config) {
        //$scope.ResponseDetails = "Data: " + data +
            console.log("Error");
            console.log("Status: " + status);
            console.log("Headers: " + header);
    });
};
vm.SendData();

});

And your ng-repeat will change to ng-repeat="data in vm.SendData()"

Kabb5 · Accepted Answer · 2016-01-07 19:02:40Z

1

They are using the Controller As syntax in the view when they say <span ng-controller="HeadlineReportController as vm">.

Controller As is something you should look in to; John Papa has a good explanation here.

From your view, you would then reference controller variables like vm.SendData(). Also, with Controller As, you will not have $scope variables in your controller.

answered Jan 7, 2016 at 19:02

Kabb5

3,9003 gold badges36 silver badges57 bronze badges

Collectives™ on Stack Overflow

Binding data with angular. (Calling method into a view)

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related