Using Angular: applying a function to an HTML variable

Question

Using Angular: applying a function to an HTML variable

I am trying to create an overlay feature for a button using the following code:

<div id="overlay" ng-if="vm.showOverlay">{{control}}</div>
<button ng-mouseover="vm.showOverlay = true" ng-mouseleave="vm.showOverlay = false" class="btn" ng-class="{classWhite: control.values.value1, classRed: control.values.value2, classOrange: control.values.value3}" ng-click="colorChange(control)"></button>

However, the data I receive from:

<td ng-repeat="control in general">

is a complex object that requires a specific function to extract the value to be displayed:

    $scope.stateFromControl=function(control){
        var values=control.values;
        var resultValue=(values.value1)?0:(values.value2)?1:2;
        return translateState(resultValue);

    }

Unfortunately, inserting this function directly into the {{}} does not work. How can I properly implement it?

javascript angularjs overlay

Answer 1

Answer №1

For a temporary solution, I successfully implemented it by introducing a variable state that I update with every change:

var updatedValue={
            id: i,
                name: facility,
            state: translateState(oldStatus),
            values:{
                value1: oldStatus==0,
                        value2: oldStatus==1,
                        value3: oldStatus==2
            }
        }

This variable can be utilized as follows:

<div id="overlay" ng-if="vm.showOverlay">{{updatedControl.state}}</div>

Although not perfect, this method is currently functional.

Answer 2

For a temporary solution, I successfully implemented it by introducing a variable state that I update with every change:

var updatedValue={
            id: i,
                name: facility,
            state: translateState(oldStatus),
            values:{
                value1: oldStatus==0,
                        value2: oldStatus==1,
                        value3: oldStatus==2
            }
        }

This variable can be utilized as follows:

<div id="overlay" ng-if="vm.showOverlay">{{updatedControl.state}}</div>

Although not perfect, this method is currently functional.

Using Angular: applying a function to an HTML variable

Answer №1

Similar questions

Sharing scope variables between multiple dynamically created directives

What are some strategies to troubleshoot unexpected outcomes when using useEffect in React?

Ways to automatically change a URL into a clickable link upon pasting

Most efficient method for transmitting and receiving a color array through websockets

Deciphering HTML within a Vue attribute: Tips and tricks

Adapting the visual display according to the selected radio button output

Steps for "submitting" a portion of a form with jQuery

The issue related to a form control named 'No value accessor' lacking an accessor

Adjust background color on click using JavaScript

Angular encountering issue binding array in $http POST request

Is it necessary to initialize the database before invoking the main controller in Ionic Sqlite using Ionic and ngCordova (AngularJS)?

Is there a way to prevent users from dropping links or images into an input field

Tips for staying on the same page when hovering over a table

Generate an error upon submission if a particular checkbox is chosen from a group of checkboxes

Utilize jQuery to initiate an AJAX request based on the data retrieved from a previous AJAX call, then retrieve the resulting array

Arranging HTML elements using JavaScript or jQuery

Distribute the capabilities of the class

Bootstrap: .stacked-navigation

Are you facing an issue with loading external templates in AngularJS?

Guide to extracting data from dynamic html table rows with jQuery