Prevent empty fields in ng-repeat using AngularJS

Is there a way to display only the current user's amount without the | currency:"£" filter?

(function() {
  var app = angular.module('myApp', []);
  app.controller('roomController', function($scope) {
    $scope.users = [{
      id: 1,
      firstname: 'member',
      spent: 206.98
    }, {
      id: 2,
      firstname: 'member',
      spent: 12.23
    }, {
      id: 3,
      firstname: 'member',
      spent: 302.12
    }, {
      id: 4,
      firstname: 'member',
      spent: 198.21
    }, {
      id: 5,
      firstname: 'member',
      spent: 85.85
    }];
    $scope.currentuser = 4;
  });
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="roomController">
    <h2 ng-repeat="user in users"><i class="fa fa-gbp"></i> {{ user.id === currentuser ? user.spent : '' | currency:"£"}}</h2>
  </div>
</div>

Answer №1

It appears that you can achieve the desired outcome without using the ternary operator by implementing an ng-if directive within the <h2> tag that is being looped through.

Here is an example:

(function() {
  var app = angular.module('myApp', []);
  app.controller('roomController', function($scope) {
    $scope.users = [{
      id: 1,
      firstname: 'member',
      spent: 206.98
    }, {
      id: 2,
      firstname: 'member',
      spent: 12.23
    }, {
      id: 3,
      firstname: 'member',
      spent: 302.12
    }, {
      id: 4,
      firstname: 'member',
      spent: 198.21
    }, {
      id: 5,
      firstname: 'member',
      spent: 85.85
    }];
    $scope.currentuser = 4;
  });
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="roomController">
    <h2 ng-repeat="user in users" ng-if="user.id === currentuser"><i class="fa fa-gbp"></i> {{ user.spent | currency:"£"}}</h2>
  </div>
</div>

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

Attempting to import a 3D model in the format of .glb

Encountered error in console: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". Attempting to load a 3D model, here are my index.html and 3dmodel.js files. Am I overlooking some ...

Find the differences between two arrays and eliminate any matching items

In my Vue project, I am working with two arrays. The first array, TempId, contains the following data: [{"id":47},{"id":45},{"id":48}] The second array is called multiprices and it looks like this: multiprices: [ { ...

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

I have been working on developing a shopping list program using JavaScript. The program includes an input box and an "add item" button, which adds the text entered in the input field to an unordered list as a list item. Each list item also contains an imag ...

Creating a new file for a promise function

Initially, I managed to make this function work within a single file. However, I prefer organizing my code by splitting it into multiple files. // library.js file module.exports = { get: () =>{ return new Promise((reject, resolve) =>{ ...

Communicate with a PHP page using Volley for both sending and receiving data

I am planning to pass a parameter to a PHP page, and after performing specific processing on it, I want to receive a series of parameters in JSON format from the same page. Below is the code I have written for this: //Displaying progress dialog final Prog ...

Rapidly update code changes using the development mode in Next.js with the VS Code Remote Container/devcontainer

Struggling to enable Next.js' Fast Refresh feature while using a VS Code Remote Container. Running npm run dev displays the app on localhost, indicating the container functions properly - but Fast Refresh remains ineffective. Next.js version: v11.0.1 ...

Getting access to a particular array nested within an array in a Vue object

I need to display only one question from the questions array on a single page, based on the category selected by the user. faqData = [ { name: "first-category", questions: [ { id: 1, question: "First question? ...

creating a list of integers

Is there a quick way to initialize an array of integers (or any multi-byte type) to a non-zero and non-negative value in just one line of code? I'm looking for a more efficient solution that doesn't involve setting each element individually: int ...

Using Google Earth or Cesium to display moving shapes on a map

I'm feeling quite puzzled at the moment and could really use some advice. My goal right now is to achieve a Satellite view of a random building, complete with the typical RoadMap/3D effect found on Google Maps: I also want to incorporate three.js to ...

What is the best way to condense the following layout using a pandas dataframe?

In need of assistance with testing JSON data that has been loaded into a dataframe using pandas. Specifically, I am focusing on extracting the Id and Events keys by segregating them into separate dataframe. The task at hand involves iterating through each ...

Is there a way to effectively remove the data stored in a BufferAttribute on the GPU using threejs?

When working with BufferAttributes in threejs, I encountered a scenario where I needed to delete a specific attribute without affecting others. The initial setup looked something like this: geometry.setAttribute("xxx", new THREE.BufferAttribute(new Float3 ...

Optimizing media performance for an AWS web application

As I work on developing a web application (using Django, Angular, and AWS), I anticipate it to be media-intensive with users uploading numerous images, videos, and recordings. At the moment, we are storing this content in S3. I am seeking advice on the op ...

Error message: React router issue (Prop type failure: Prop `children` supplied to `Switch` is invalid, expecting a ReactNode.)

Trying to modify a component in order to create a login page, I attempted to modify App.js but encountered an error. warning.js?6327:36 Warning: Failed prop type: Invalid prop children supplied to Switch, expected a ReactNode. This is the code I have ...

Angular ng-repeat feature not displaying data from local server

I have created a custom db.json file with the following structure: { "project_topics": [ "- Any -", "Access for disadvantaged", "Agriculture, forestry and fisheries", "Animal welfare", "Energy and resources", "Enhance social inclusion, equal opportuniti ...

Are you looking to load pictures using jQuery?

I am currently using a ul li menu setup as follows: <ul> <li><a href="#1">Image #1</a></li> <li><a href="#2">Image #2</a></li> <li><a href="#3">Image #3</a></li> ...

Struggling to get getInitialProps working in dynamic routes with Next.js?

I am encountering an issue. The return value from the getInitialProps function is not being passed to the parent component. However, when I console.log the values inside the getInitialProps function, they appear to be correct. Here is the code snippet: i ...

Ways to retrieve a converted document using the Microsoft Graph API

I'm encountering an issue when trying to save a PDF file received from the Microsoft Graph API. The call I am making looks like this: const convertConfig = { headers: { Authorization: <my token> } }; convertConfig.headers['C ...

Converting a CSV file to JSON using C#

Apologies in advance as this question is more of a "How to" rather than a technical inquiry. I have a CSV file structured like this- London,Dubai,4 Dubai,Mumbai,8 Dubai,Dhaka,4 My goal is to convert this CSV into a JSON object with the specified format- ...

Having trouble retrieving JSON data using jQuery and Handlebars?

Hey there, I'm new to JSON and all the talk about JavaScript templating engines for front-end dynamic changes. However, I'm struggling to make progress. Can anyone help me out? The JSON file is named data.json { users: [{ userna ...

Can you please explain how to create literal arrays in Free Pascal?

I have a list of around 50 hard-coded bytes that I need to store in a byte array. However, I am struggling to locate the syntax for hard-coded arrays in Free Pascal. For sets, the syntax is [elem, elem, elem]. Can someone please advise on what syntax shou ...