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

Is the child component in Angular re-rendered or re-initialized?

Recently started working with Angular(14) and encountered a problem. Whenever I update a property of the parent component, which is an array, the child component gets re-initialized (running the ngOnInit function). This issue arises when using the child co ...

angularangularjsangularjs-directive

Error: The value of 'v4' property is not defined and cannot be read

I am encountering an issue with Vue.js: vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'v4' of undefined" found in ---> <AddTodo> at src/components/AddTodo.vue <App> at src/Ap ...

javascriptvue.jsvue-componenttypeerroruuid

Discovering the orientation of an object in relation to the camera

I'm encountering a challenge in determining the angle of an object in relation to the camera. My goal is to write code for a spaceship with a camera that follows it. While I have successfully made the camera track the ship, there are instances where t ...

javascriptthree.jsrotation

Unusually Elevated Frame Rates within Three.js

I just launched a new website yesterday, which is dedicated to live editing three.js examples. I noticed that whenever I make updates to the code or switch between different example files, the frame rate of the site jumps up to around 1000 f/s. You can fi ...

javascriptreactjsiframethree.js

Does v-if cause the jquery clock picker to malfunction?

Here is my unique div where the clockpicker library functions correctly. <div class="input-group clockpicker"> <input type="text" class="form-control" value="18:00"> <span class="input-group-addon"> <span class ...

javascriptvue.js

Tips for automatically sending data back to the server every two seconds using ASP.NET Web Form

My Textbox looks like this : <asp:TextBox runat="server" ID="Text1"></asp:TextBox> I need my Textbox to send data back to the server every two seconds using setInterval in JavaScript. ...

javascriptjqueryasp.nettextbox

Can you provide a guide on how to retrieve an HTML file using JSON?

There is a problem with fetching files in different formats. Specifically, I want to retrieve an HTML file that needs to be embedded in an iFrame. Currently, my AJAX request only retrieves SWF files. Is there a way to call and fetch the HTML file instead ...

javascriptjqueryhtmlajaxjson

What is the relationship between Bower and NPM when they are used together?

As a Java back-end developer transitioning to front-end JavaScript, I'm facing the challenge of setting up testing for our client-side code. While I have experience with server-side Node projects and tools like Maven, I'm relatively new to front- ...

javascriptbuildnpmbowerdependency-management

No matter how tall I make it, the scroll bar just won't stop showing

Check out this fiddle for more information: http://jsfiddle.net/LAueQ/ Even after increasing the height of the campaignDiv div, the scrollbar keeps showing up. If possible, I would like to avoid using overflow: hidden. ...

htmlcss

Creating a JavaScript anchor through a backend bean function

Is it crazy to want to create an anchor that can be called from a backing bean method using JavaScript? I need to do this for specific reasons, utilizing a commandButton with ajax set to false. I'm attempting the following approach: RequestContext.g ...

javascripthtmlajaxjsfprimefaces

I'm curious about how to properly escape single quotes when passing a variable in a Java argument call using Karate DSL. Can you help

As part of our API project at work, I am looking to incorporate database calls into our end-to-end process. One challenge I am facing is how to handle single quotes within a variable that is passed as an argument in an assert method. I have attempted the f ...

javascriptjavasqlkarate

Tips for Creating a Fixed-Width Element

I am struggling with creating text wrapping around a box inside a full width page template on Wordpress. The plugin developer suggested wrapping the text inside a fixed width element, but I am unsure how to do this. Any assistance would be greatly apprecia ...

phpcsswordpressthemes

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Is there a way to disable the zoom/lens on uiwebview without affecting user selection? I'm trying to avoid using "-webkit-user-select:none" in my css. -webkit-user-select:none ...

javascriptioscssuiwebview

Is it possible to alter the canvas origin when using an Orthographic camera with a CSS3D

When transitioning the camera from perspective to orthographic, I noticed that the camera's position also shifts so that the coordinates 0,0,0 are situated in the top left corner. Is this expected behavior? Check out this Example for reference. Ortho ...

javascriptthree.js

Consolidate radio group in Vuetify platform

I'm having trouble centering the v-radio-group. Here's my current setup: <v-container grid-list-md text-xs-center> <v-form ref="form"> <div v-if="question.question_type == 'YESNO' "> <v-radio-group ...

javascriptcssvue.jsvuejs2vuetify.js

npm unable to locate the specified file

I'm currently following a tutorial on creating a Google Maps clone. After completing the build, I tried running the npm start command but encountered the following errors: npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\m ...

javascriptreactjsnpm

Is there a way to transfer parameters from a Vue function to a component?

I am struggling to find the right solution for passing parameters to a function. I need to use NavigateTo to send a String value to my index in order to switch components without using Vue Router. Home.js Vue.component('Home', { props: [&apo ...

javascriptfunctionvue.jsfunction-parameter

What steps are needed to create a hover box that appears on the right side of my div?

I am attempting to customize the code found at this link so that the box slides to the left side instead of the right. I thought changing right: 0; to right: 100%; in the .overlay class would achieve this, but it is not working as expected. I want it to l ...

htmlcss

How can you store previously calculated values in a costly recursive function in a React application?

Consider a scenario where there is a recursive callback function like the one shown below: const weightedFactorial = useCallback(n => { if (n === 0) { return 1; } return weight * n * weightedFactorial(n - 1); }, [weight]); Is it possible to ...

javascriptreactjsrecursionreact-hooks

Ensure that the initial section of the page spans the full height of the browser, while all subsequent sections have a

I have a website composed of various blocks with different heights, all extending to full width. My goal is to make the first block the full height and width of the browser window, while keeping the other blocks at a set height as seen on this site: After ...

javascriptjqueryhtmlcss