Conceal the information within a table using angular js and HTML

Just starting out with angular and I have a table that displays angular data directly in the HTML without any controller or model.

<table  width="98%" border="0" cellspacing="1" cellpadding="2" class="labels" align="center" id="locc">
  <tr style="color:#000;font-size:15px;font-family:Arial, Helvetica, sans-serif;background-repeat:repeat-x" height="30" >
    <td colspan="4"  align="center"></td>
  </tr>
  <tr style="color:#000;font-size:15px;font-family:Arial, Helvetica, sans-serif;background-color:gold;background-repeat:repeat-x"
      height="30" >
    <td  width="211"  align="center">COMMODITY</td>
    <td  width="149" align="center" valign="middle"  >BUY</td>
    <td  width="175" align="center" valign="middle" >SELL</td>
  </tr>
  <tbody ng-repeat="item in newsData | limitTo : 2" >
  <tr bgcolor="#FFFFFF" height="40"  >
    <td  align="center" style="background-image:url(images/td.png);color:#000;font-size:15px" >{{item.COMMODITY | limitTo: 18 }}</td>
    <td  align="center" valign="middle" style="color:#000000;font-size:20px" class="{{item.BCOL}}" ><div  >&nbsp;&nbsp;{{item.BUY}}&nbsp;&nbsp;</div></td>
    <td  align="center" valign="middle" style="color:#000000;font-size:20px" class="{{item.SCOL}}"  ><div >{{item.SELL}}&nbsp;&nbsp;</div></td>

  </tr>
  </tbody>
</table>

This code snippet generates the following output:

https://i.stack.imgur.com/FHf1Y.png

All the data under "Commodity" is displayed by default. My goal is to only show content like 999[GOLD][IMPORTED] and truncate the rest of the text after that.

javascripthtmlcssangularjs

Answer №1

Consider using the limitTo filter in this case:
By using this filter, you can specify the number of characters to display from the beginning.
For example, if you only want to show the first 19 characters of a string stored in item.COMMODITY, you can use:
{{ item.COMMODITY | limitTo: 19 }}
This will display the first 19 characters of the string "999[GOLD][IMPORTED]".

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

Steps to display a NotFound page when the entered path does not match the route in module federation React micro frontends

Typically, if the provided path does not match, we display the NotFound page to the user using the following code snippet <Route path={"*"} component={NotFound} /> However, upon adding this code, I always get redirected to the home page ( ...

javascriptreactjswebpackreact-router-domwebpack-module-federation

Issue with Smooth Div Scroll on Chrome

I'm currently utilizing a plugin called Smooth Div Scroll, which can be found at Despite the automatic scrolling functionality working perfectly on Firefox, IE, and Safari, I'm encountering an issue with it not initiating when the page loads in ...

jquerygoogle-chromehtmlscrollsmooth-scrolling

Pagination in DynamoDB: Moving forward and backward through your data

Currently, I am utilizing DynamoDB in combination with NodeJS to display a list of objects on the user interface. Given that DynamoDB can only process 1MB of data at a time, I have opted to implement pagination. This allows users to navigate between pages ...

javascriptnode.jsamazon-dynamodbdynamodb-queries

The URL requested exceeds the maximum length limit in asp.net, causing a 414 error

I encountered the issue of receiving an "HTTP Error 414. The request URL is too long." While reading through this article, I learned that it is caused by an excessively lengthy query string: Currently in my web.config, I have set maxQueryStringLength to " ...

c#htmljquery

Laravel error message for unresolved symbolic link

Previously, I had developed a form for uploading profile pictures using the code snippet below, $image = $request->file('avatar'); $pass = Hash::make($request->password); if($image!=null){ $avatar_na ...

phphtmllaravel-6

The drop-down menu seems to have disappeared from sight

I'm having an issue with getting a dropdown to appear in my registration form. Everything else in the form is displaying correctly and functioning properly, but the dropdown remains invisible. After searching extensively, I haven't been able to ...

phphtmlcssyii

Merging two distinct arrays of objects in JavaScript can be achieved by utilizing various methods and

I have a challenge where I need to merge two arrays of objects in a nested way. var array1=[{ PersonalID: '11', qusetionNumber: '1', value: 'Something' }, { PersonalID: '12', qusetionNumber: '2& ...

javascriptnode.jsjavascript-objects

What is the process for using dojo to load content?

As I work on creating a single-page website with the help of dojo, I refer to tutorials that explain how to utilize dojo/request for ajax requests. The process is straightforward - simply make a request, receive HTML content, and insert it into a designate ...

javascriptajaxdojo

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

I am currently facing an issue with implementing a custom radio button element in Angular. Below is the code snippet for the markup I want to make functional within the parent component: <form> <my-radio [(ngModel)]="radioBoundProperty" value= ...

javascriptangulartypescript

JavaScript Plugins for Cordova

The more I delve into the inner workings of Cordova, the clearer it becomes to me. Yet, one area that continues to perplex me is the structure of JavaScript plugins. Typically, I write my JavaScript code as follows, adhering to what I believe is the stand ...

javascriptpluginscordovacordova-3

Having difficulty choosing an element with protractor's virtual repeat functionality

Initially, I successfully used ng-repeat to select an element. However, the developers have since implemented virtual repeat which has caused the following code to stop working: expect(stores.listStores(0).getText()).toContain('Prahran'); expect ...

javascriptseleniumselenium-webdriverprotractorend-to-end

Moving a Node project to a different computer

I am looking to transfer my Angular project from a Windows machine to a Mac. I attempted to copy the folder and run npm install, but encountered an issue. Here is the error message I received: sh: /Users/pawelmeller/Documents/hotel/angular4/node_modules/ ...

javascriptangularjsnode.jsnpmdependencies

Having trouble establishing a connection to MySQL through NodeJS and Express

I am currently attempting to establish a connection to MySQL using a nodeJS app with express as the server. I have referred to the mysql npm documentation to start the connection process, but I keep encountering an error in the callback function within cre ...

javascriptmysqlnode.jsexpressphpmyadmin

Put the title tag within a script in the shell

Within an HTML snippet, I currently have a <title> tag that I need to change on a monthly basis when generating reports. While I can manually update it each month, I am looking for a way to automate this process so the title reflects the relevant rep ...

htmlshelltagstitle

The navigation bar buttons in my IONIC 2 app are unresponsive on both the

In Ionic 2 for Android, I encountered an issue with the title placement. To resolve this, I applied some CSS to center the title and added left and right buttons to the nav bar. However, when I tried to implement onclick functionality for these buttons, no ...

htmlcssangularjsionic2hybrid-mobile-app

Displaying JSON file data on an HTML webpage with the help of jQuery

Attempting to extract information from a JSON file and display it on an HTML document. Here is the code snippet: $(document).ready(function() { $.ajax({ type: "GET", url: "Beer.json", dataType: "json", success: processBeer, error: fu ...

jqueryhtmlajaxjson

What is the process of matching a server response with the appropriate pending AJAX query?

Imagine a scenario where my web app utilizes AJAX to send out query #1, and then quickly follows up with query #2 before receiving a response from the server. At this point, there are two active event handlers eagerly waiting for replies. Now, let's ...

javascriptajaxasynchronous

Expanding Drop-Down Feature in CodeIgniter: How to Create Nested Dropdown Menus

I'm working on a dropdown menu that is populated with items using a foreach statement. When an item is selected, I need another dropdown menu to appear where specific items can be specified. First Dropdown - Categories (Completed) When a Category is ...

javascriptphpjqueryhtmlcodeigniter

Streamlined Infinite Scrolling Data Visualization Using SVG Implemented in HTML and CSS

I have developed a dynamic graph that continuously updates with new data points being plotted. Right now, I am utilizing requestAnimationFrame() to render the element positions 30 times per second, but performance can be sluggish with numerous SVG element ...

htmlcsssvgcss-transitionssvg-animate

The success callback in JQuery Ajax does not function properly when constructing an array of Ajax calls

I am facing a challenge in building an array of custom objects by resolving promises from an array created based on another array. Consider having an array of letters = ['a', 'b', 'c']. I then map this array to make Ajax call ...

javascriptjqueryangularjsajaxpromise