Improprove Your Code Efficiency Using ng-repeat and ng-if

Hello everyone,

Here is the structure of my table :

https://i.sstatic.net/rTbiC.png

The code for the table is as follows:

<tr ng-repeat="item in captions | filter:search:strict">
    <td>{{item.CodeId}}</td>
    <td>{{item.EnumCaption}}</td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='nl' && language.CodeCountry=='BE'">
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='en' && language.CodeCountry=='GB'">
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='fr' && language.CodeCountry=='BE'">  
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>
    <td>
        <p ng-repeat="language in item.languages" 
             ng-if="language.CodeLanguage=='de' && language.CodeCountry=='DE'">
            <a href="#" 
                onaftersave="updateCaption(language)"
                editable-textarea="language.Caption" 
                e-cols="25" 
                e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
        </p>
    </td>

</tr>

The JSON data is as follows:

Captions = 
[
    {
        CodeId: 1,EnglishCaption: "",EnumCaption: "",
        languages: 
        [
            {Caption: "",CodeCountry: "DE",CodeId: 1,CodeLanguage: "de",EnumCaption: ""},
            {Caption: "",CodeCountry: "GB",CodeId: 1,CodeLanguage: "en",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 1,CodeLanguage: "fr",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 1,CodeLanguage: "nl",EnumCaption: ""}
        ]
    }
    ,
    {
        CodeId: 2,EnglishCaption: "",EnumCaption: "",
        languages: 
        [
            {Caption: "",CodeCountry: "DE",CodeId: 2,CodeLanguage: "de",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 2,CodeLanguage: "fr",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 2,CodeLanguage: "nl",EnumCaption: ""}
        ]
    }
    ,
    {
        CodeId: 3,EnglishCaption: "",EnumCaption: "",
        languages: 
        [
            {Caption: "",CodeCountry: "DE",CodeId: 3,CodeLanguage: "de",EnumCaption: ""},
            {Caption: "",CodeCountry: "GB",CodeId: 3,CodeLanguage: "en",EnumCaption: ""},
            {Caption: "",CodeCountry: "BE",CodeId: 3,CodeLanguage: "nl",EnumCaption: ""}
        ]
    }
]

I am seeking a way to optimize my code to avoid repetitive use of ng-repeat with ng-if conditions. Any suggestions on how to efficiently populate the data in its correct place considering variations in language presence within the JSON object would be appreciated.

Thank you :)

javascriptjsonangularjs

Answer №1

It appears that you have static columns, so a solution would be to create an array with the required order:

ng-init="lang = ['nl-BE', 'en-GB','fr-BE','de-DE']"

Then, iterate over this array and render the necessary elements from the languages array:

<td ng-repeat="la in lang"
    ng-init="l = lang[$index].split('-'); language=(item.languages|filter:{CodeLanguage:l[0], CodeCountry:l[1]})[0]">
    <p ng-if="language">
        <a href="#" onaftersave="updateCaption(language)" editable-textarea="language.Caption" e-cols="25" e-rows="{{(language.Caption.length/25)+3}}">{{language.Caption}}</a>
    </p>
</td>

Please note: This method is particularly useful if modifying the JavaScript code directly is not feasible.

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

Issue: ASSERTION ERROR: token must be declared [Expecting => null is not undefined <=Actual]

I encountered an error while working on my project. The only special thing I did was use oidc(openId) for authentication. I made some changes to the bootstrap project and now the first component that is running is the home-main component, which includes t ...

javascriptangulartypescript

Error encountered when attempting to load files from the same domain due to CORS restrictions

I'm currently developing a website at and I am trying to load the content of an HTML file into an element. I have specified the element as $('.about-us-first-col') and I am loading the content using the code: $('.about-us-first-col&apo ...

javascriptjquerycors

The Node.js server is outputting an HTTP status code of 404

I have recently set up a small server. Interestingly, when I attempt to perform a GET request to my server through a browser, I can see the correct data. However, when I try to make a POST request to my server using code, I receive an HTTP status 404 error ...

javascriptnode.jsserverhttp-status-code-404

Encountered an error: Unable to access properties of null (specifically 'useState'). Additionally, facing difficulties with utilizing the React flag select feature

** Uncaught TypeError: Cannot read properties of null (reading 'useState')** import { useState } from 'react'; import React from 'react'; import Slider from "react-slick"; import ReactFlagsSelect from 'react- ...

javascriptreactjsreact-nativenpm

What could be causing my page width to only expand to 100% when using "fit-content"?

After searching extensively, I'm unable to find a solution that fits my current issue. My goal is to construct a practice ecommerce website using React. One of the components I have is a header which I'd like to occupy 100% of the screen width, c ...

javascriptcssreactjswidth

Retrieve data from an SQL database and populate an HTML dropdown menu in a web page using PHP

I am a beginner in the world of JavaScript and facing some challenges. I am working with PHP 7 and attempting to retrieve data from an SQL database, specifically a table. My goal is to extract a single column from this table and display it in a dropdown me ...

javascriptphphtmlmysqldatabase

What is the best way to invoke a function only once in typescript?

Struggling to implement TypeScript in React Native for fetching an API on screen load? I've been facing a tough time with it, especially when trying to call the function only once without using timeouts. Here's my current approach, but it's ...

javascriptreactjstypescriptreact-nativeexpo

Basic Inquiry: Unhandled TypeError - Unable to access the property 'length' of an object that is not defined

Currently, I am utilizing a straightforward JSON Ajax request to fetch some JSON data. However, every time I attempt to use the JSON object, I encounter the following error: Uncaught TypeError: Cannot read property 'length' of undefined $(do ...

javascriptjqueryjsonajax

Having trouble getting your custom Angular directive to function properly with dynamically changing images?

Currently in the process of developing a custom directive for AngularJs that involves an image rotator based on a Jquery Plugin I created, you can check it out here Below is the code snippet for my directive: .directive('imageRotator', function ...

javascriptjqueryangularjs

Maximizing the Efficiency of Three js with Image Textures for Faster Performance

I have some code to share, but unfortunately, I don't have the images to upload along with it. Within the code, there are two functions present: UseMeshNormalMaterial() and UsePngMaterial(). This setup allows you to easily test the code if you happ ...

javascriptperformancethree.js

Why is my React Native button's onPress event not functioning correctly?

I am encountering an issue with the onPress event handler. I have tried multiple solutions but none seem to work with the handleClick function. Here are the different approaches I attempted: onPress={this.handleClick} onPress={this.handleClick()} onPress= ...

javascriptreactjsreact-native

Guide on establishing a connection to a broker API using Java and sockets?

I've been struggling to establish a connection with the XTB API and it's becoming quite frustrating. I have very limited knowledge when it comes to sockets, so I'm basically learning as I go along. My current challenge involves sending a JSO ...

javajsonapisocketstrading

Under what circumstances is it possible to iterate through an empty array?

When defining arrays in JavaScript using Array(n), it creates an empty array. If I write the following code: Array(2).map((val) => console.log(val)) Nothing happens when running this code, but if I spread out the elements of the array into another a ...

javascriptarrays

Streaming audio from a microphone to speakers on Ubuntu using HTML5

Currently diving into html5 and eager to experiment with playing back what I say on a microphone through speakers. Here is the JavaScript code I've put together: navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia || naviga ...

javascriptlinuxhtmlubuntufirefox

Add a sub-modal window inside a separate container

Is there a way to attach this modal to an external div? The current setup involves nesting it within a container that has a fixed height. I'm looking to move it outside of that container. Here is the JavaScript code for the modal: client.fetchQuery ...

javascriptjquerynode.js

Executing Javascript on Selenium RC with PHP is a crucial skill to have in your toolkit

Is there a way to execute Javascript from Selenium RC? I have been trying different methods with no success so far. I attempted the following approach: I created a custom function in user-extensions.js: function sayhello() { document.write('hel ...

javascriptseleniumselenium-webdriverselenium-rc

Deciphering complex JSON structures in PHP

I've come across a JSON structure that I need to parse. While I have managed to extract individual nested objects, it feels like there should be a simpler way to achieve this without having to search for each nested structure. Here is an example of t ...

phpjsonparsingdecode

Switching from an AJAX GET request to a POST request involves updating the

I have been trying to figure out how to convert my AJAX GET query to POST by reading forums and searching on Google, but I am still confused. If someone could assist me with this, it would be greatly appreciated. Thank you! Here is the code snippet I am w ...

javascriptajax

Which event in the listbox should I trigger to adjust the scroll position?

My webpage includes a listbox inside an update panel. I've managed to capture the scroll position, but now I'm facing difficulty in identifying the right javascript event to call my function for setting the scroll position after the update panel ...

javascriptasp.netlistboxupdatepanelposition

How can you move away from using the url:port scheme with socket.io?

Recently, I've been delving into node.js and socket.io, but I'm struggling to eliminate the need to type "url:port" in the browser. Instead, I want users to simply enter the URL and have everything load up, similar to my work-in-progress single p ...

javascripthtmlnode.jssocket.io