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//////
}

Answer 1

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 )

Answer 2

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);

});

Answer 3

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;
       // ...
   }
}