Call angular function inside ng-repeat and return array

Question

I searched for this but I did not get any answer as I want, please give me a solution, I want to use ng-init inside ng-repeat, ng-init should give me different response at every loop here is my HTML

<html>
    <body ng-app="crmApp">
        <div ng-controller="customerDetailController">
            <div ng-repeat="clientDetail in client">
                <p>{{clientDetail.name}}</p>
                <div ng-init="seoDetails = getCustDetail(clientDetail.name)">
                    <p>{{seoDetails.cust_Name}}</p>
                </div>
            </div>
         </div>
    </body>
</html>

and my js is

<script>
    var crmMain = angular.module('crmApp', ['ngRoute','ngMaterial']);
    crmMain.controller('customerDetailController',function customerDetailController($scope, $http, customerDetailFactory,$window) {
        $scope.client = [];

        $scope.init = function () {
            $scope.getCustomerData();
        };

        $scope.getCustomerData = function () {
            customerDetailFactory.getCustomerDetailData().then(function 
(response) {
                $scope.client = response.data;
            });
        };

        $scope.getCustDetail = function (Name) {
            var custDetail = [];
            custDetail = customerDetailFactory.getCustomerDetailData(Name).then(function (response) {
            alert(response.data.cust_Name);
            return response.data;
        });
        return custDetail;
    };
    $scope.init();

});

crmMain.factory('customerDetailFactory', ['$http', function ($http) {
var factory = {};
var url = 'phpFile/customerDetail.php';

factory.getCustomerDetailData = function (Name) {

    return $http({
        method: 'POST',
        url: url,
        data: {
            'functionName': 'clientDetailPage',
            'customerName': Name
        }
    });
};
return factory;

}]);
</script>

In inside getCustDetail function I was given alert in there it 'll show name, but I don't know why it not showing in HTML.is anything wrong I did?

I have got one solution for this, I think I have to use Promises for this, but I don't know how to use it can anyone help me in this?

Check the docs, there are very few times where you should use ng-init. docs.angularjs.org/api/ng/directive/ngInit — Phix
– Phix, Commented Dec 14, 2017 at 6:38
ya, I used ng-init inside of the ng-repeat property, is there any problem? — Deekshith S
– Deekshith S, Commented Dec 14, 2017 at 7:17

Aswath K · Accepted Answer · 2017-12-14 08:28:14Z

1

You cannot use ng-init for this purpose. You've to do the data fetching inside the controller itself. That is like,

customerDetailFactory.getCustomerDetailData()
.then(function(response) {
    $scope.client = response.data;

    // for each clients, fetch 'seoDetails'
    $scope.client.forEach(function(client) {
        customerDetailFactory.getCustomerDetailData(client.name)
        .then(function (response) {
            // I hope response.data contains 'cust_Name'
            client.seoDetails = response.data;
        })
    });
});

Now, in the view, you can directly use the seoDetails property

<div ng-repeat="clientDetail in client">
    <p>{{clientDetail.name}}</p>
    <p>{{clientDetail.seoDetails.cust_Name}}</p>
</div>

answered Dec 14, 2017 at 8:28

Aswath K

3753 silver badges11 bronze badges

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

1 Comment

Deekshith S Over a year ago

I have one doubt can we put array to client.seoDetails inside forEach loop? and use it using of ng-repeat? do it works? for ex: in response i return array to client.seoDetail and in HTML i use it like this <div ng-repeat="clientSEO in clientDetail.seoDetails"t><p>{{clientSEO.cust_Name}}</p></div>

Collectives™ on Stack Overflow

Call angular function inside ng-repeat and return array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related