angularjs call function from html return value

Question

I'm new to AngularJS.

I want to call a function from html.

<td>
    {{getComponentSubtype(component.ID)}}
</td>

However, the function calls a webapi and waits for a callback. How do i get the data to show up in the html?

function getComponentSubtype(componentId) {
    apiService.get('/api/components/' + componentId + '/componentSubtype', config,
        getComponentSubtypeCompleted,
        getComponentSubtypeFailed);
}

function getComponentSubtypeCompleted(result) {
    $scope.ComponentSubtype = result.data;
    //////I WANT TO RETURN $scope.ComponentSubtype.Name//////
}

Is this getting called inside an ng-repeat? A little more info is required to give you a solid answer. — Lex
– Lex, Commented Apr 1, 2016 at 21:18
In that case you will need a solution similar to the one S4beR suggests. — Lex
– Lex, Commented Apr 1, 2016 at 22:09

S4beR · Accepted Answer · 2016-04-01 21:23:38Z

call the function from HTML and once callback is received store its value in a JSON object which can be printed in HTML. Meanwhile show a loading message in UI

HTML:

{{ getComponentSubtype(component.ID) }}

<td ng-if="componentsSubType[component.ID] != null">
    {{ componentsSubType[component.ID] }}
</td>
<td ng-if="componentsSubType[component.ID] == null">Loading Component ...</td>

Controller:

function getComponentSubtype(componentId) {
    apiService.get('/api/components/' + componentId + '/componentSubtype', config,
    function(result) {
        if ($scope.componentsSubType == null) {
            $scope.componentsSubType = {};
        }

        $scope.componentsSubType[componentId] = result;
    },
    function() {
        if ($scope.componentsSubType == null) {
            $scope.componentsSubType = {};
        }

        $scope.componentsSubType[componentId] = "Load Failed";
    });
}

Note: I have assumed that in HTML you are getting component from a loop (ng-repeat)

danday74 · Accepted Answer · 2016-04-01 21:18:52Z

1

in your HTML ...

<td>{{myvariable}}</td>

in your controller ...

angular.module('yourApp').controller('ControllerName', function($scope, apiService) {
$scope.myvariable = 'please wait';
function initComponent(id) {
    apiService.get('/api/components/' + id + '/componentSubtype').then(function(response) {
        $scope.myvariable = response;
    }).catch(function(failedResponse) {
        // handle failure here
        console.log('oops', failedResponse);
    });
}

initComponent(500);

});

answered Apr 1, 2016 at 21:18

danday74

58k56 gold badges273 silver badges337 bronze badges

Comments

evsheino · Accepted Answer · 2016-04-02 08:22:36Z

0

This is quite likely not ideal, but I would need to know more about your code for a better solution.

You could use an object to store the types and access that in your template:

<td>{{ componentSubtypes[component.id] }}</td>

Call getComponentSubtype for each component id:

$scope.componentSubtypes = {};

components.forEach(function(component) {
    getComponentSubtype(component.id);
});

function getComponentSubtype(componentId) {
    apiService.get('/api/components/' + componentId + '/componentSubtype', config,
        getComponentSubtypeCompleted(componentId),
        getComponentSubtypeFailed);
}

// Using a closure here for the id
function getComponentSubtypeCompleted(id) {
    return function(result) {
       $scope.componentSubTypes[id] = result;
       // ...
   }
}

edited Apr 2, 2016 at 8:22

answered Apr 1, 2016 at 21:16

evsheino

2,30623 silver badges24 bronze badges

2 Comments

billboard Over a year ago

the <td> is within a ng-repeat if that matters, but with your suggestion, I do not understand how the method getComponentSubtype gets invoked

evsheino Over a year ago

Edited the answer accordingly

Collectives™ on Stack Overflow

angularjs call function from html return value

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related