Enhance the performance of AngularJS by optimizing the ngHide attribute

 <span ng-hide="(getStatusIcon(inactive.currentStatus.code).statusDesc) =='Expired' ||
                (getStatusIcon(inactive.currentStatus.code).statusDesc) =='Rejected' ||
                (getStatusIcon(inactive.currentStatus.code).statusDesc) =='Refused'">
 PO# [[inactive.poNumber]] 
 </span>

I am looking to enhance the code by optimizing it. If the getStatusIcon(inactive.currentStatus.code).statusDesc is 'expired', 'refused', or 'rejected', we should hide the span tag. Currently, the function is called three times. Is there a way to check if getStatusIcon(inactive.currentStatus.code).statusDesc is in ('expired', 'refused', 'rejected') and only call the function once?

javascriptangularjsangularjs-ng-repeat

Answer №1

To ensure the function is only called once, utilize ng-init:

  <span ng-init="statusDesc = getStatusIcon(inactive.currentStatus.code).statusDesc" 
        ng-hide="(statusDesc) =='Expired' || 
                 (statusDesc) =='Rejected' || 
                 (statusDesc) =='Refused'">
  PO# [[inactive.poNumber]] 
  </span>

It's recommended to move the comparisons to the controller like so:

<span ng-init="statusDesc = getStatusIcon(inactive.currentStatus.code).statusDesc" 
      ng-hide="isInvalidStatusDesc(statusDesc)">
PO# {{inactive.poNumber}}
</span>

function mainCtrl($scope) {
    $scope.isInvalidStatusDesc = function(statusDesc) {
      switch (statusDesc) {
        case 'Expired':
        case 'Rejected':
        case 'Refused':
          return true;
        default:
          return false;
      }
    }; 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my ajax post function to malfunction when triggered by a button click event?

My attempts to send variables to a PHP file via AJAX when a button is clicked have been unsuccessful. Upon checking my PHP page, I noticed that the variables were not being received. $(document).ready(function(){ $("#qryBtn").click(function(){ ...

javascriptphpjqueryajaxformshttp-post

Dealing with Cross-Origin Resource Sharing problem in a setup involving Django, Cordova, Ionic, and Angular

My solution for dealing with cross origin access problems is using the django cors headers plugin. We are developing a webapp using angular, cordova, and ionic that needs to connect to a django backend endpoint. The backend server is hosted on a debian s ...

angularjsdjangocordovacorsdjango-cors-headers

JavaScript: Reorder an array to alternate between largest and smallest elements, starting with the largest

When working with an array of integers that need to be sorted in a specific order, such as: [1, -1, -3, 9, -2, -5, 4, 8,] We must rearrange them so that the largest number is followed by the smallest number, then the second largest number followed by the ...

javascript

Tips on how to style a number once a user has entered it into an input field using AngularJS

Does anyone know how to format a number in AngularJS after a user enters input into an input box? For example, if a user enters 123456 I want it to be formatted like this 123,456 Thank you ...

angularjs

What is the best way to transfer variables between two Vue files?

How can I transfer a variable between two Vue files? Hello, in my SendCode.vue file, I have a variable named NewEmail that I would like to use in another file called changePass.vue. Is there any way to do this? Can someone offer assistance? Thank you</p ...

javascriptjavapythonvue.js

updating the model value in AngularJS2 when the input value is modified

Looking to update a model's value based on user input without relying on the blur event. Unsure of the best approach for this task. Below is the code snippet I have attempted: <div *ngFor='let l of list'> <input #temp [value]= ...

angularjsangular

Instructions on deactivating the background when the sidebar is displayed and closing the sidebar by clicking anywhere other than the sidebar

I'm in the process of creating a sidebar for my website. When the sidebar is displayed (by clicking showRight), I want to disable the background content so that the user can't interact with anything outside of the menu. If the user clicks on th ...

javascriptjquerycsssidebar

Tips for verifying the presence of a value in a select box

Are there alternative approaches to using a for loop to determine if a value is present in a select box with JavaScript? I am interested in something similar to document.getElementById('selbox').valueExists('myval'); ...

javascriptdom

What is the best way to configure AngularJs UI-Router to dynamically load components in an AngularJs 1.6.1 application?

I have been following the instructions on the UI-Router website and I have configured the $StateProvider in my code almost exactly as shown, but I am having trouble getting my Components to load. The HTML pages referenced in my templateUrl are visible, how ...

angularjsangular-ui-router

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Tips for organizing the router.js file in VueJs

With my router.js file currently reaching around 500 lines, I’m looking for a better way to structure it. { path: "/", component: () => import("./../src/views/dashboard/Dashboard.vue"), meta: { auth ...

javascriptvue.jsvue-router

Display or conceal columns based on their index

<div ng-controller="checkBoxController"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="moda ...

javascripthtmlangularjshtml-table

Step-by-step guide on transforming jQuery code into Vue JS:

Recently delving into Vue, attempting to translate previous JS + JQuery code into Vue Here is the list I'm working with: <ul id="progressbar"> <li class="active">integration Ip's</li> <li>T ...

javascriptvue.js

Testing URL Parameters in JEST with an API

Seeking integration tests using Jest for an API endpoint. Here's the specific endpoint: http://localhost/universities/ucla/class/2013/studentalis/johndoe. When tested with a put request, it returns 201 on Postman. However, the testing encountered a t ...

javascriptexpressjestjssupertest

Tips on how to conditionally render a button based on the presence of a link from a separate file in React

I've been working on my personal portfolio site using React and Tailwind. One challenge I'm facing is how to display the "GitHub" button for each project card only when a GitHub link is provided in my data.js file. Currently, I'm utilizing ...

javascriptreactjsbutton

Choosing Angular UI-Router Nested View by default

When I navigate to the /profile URL, I want the state 'profile.general' to be opened by default within the parent state profile that loads the main template. How can I trigger the nested state for the ui-view when navigating to the /profile URL? ...

angularjsangularjs-routingangular-ui-router

JavaScript tool for connecting tags with JSON properties

As a beginner in JS, I am curious if there exists a JS library that can help bind html fields to a JS object. For example: <div class="js_source"> <input field="name" /> <input field="surname" /> <button type="button">S ...

javascriptjqueryhtmlbind

Tips for displaying a restricted quantity of items in a list according to the number of li lines used

My approach involves using a bulleted list to display a limited number of items without a scrollbar in 'UL' upon page load. On clicking a 'more' button, I aim to reveal the remaining items with a scrollbar in UL. The following code acco ...

c#javascriptjquerybulletedlist

Separating a variable within a Twitch bot: techniques and tips

I am working on setting up a feature in my Twitch bot where it can respond to the command !test [var]. For example, if someone types !test @jeff, the bot would reply with hello @jeff. Currently, I am using tmi. client.on('chat', function(channe ...

javascriptnode.jstwitch

Error encountered: Multer does not recognize the field when attempting to upload multiple files in a node.js environment

I would like to upload two files in one request using Node.js and I am utilizing multer for this task. Here is my request in Postman: https://i.sstatic.net/8ZEno.png Additionally, I am using multer in routing: router.post( "/Create", Uploa ...

javascriptnode.jsmulter