In AngularJs, use ng repeat and ng switch to dynamically generate and display tables

I need help rendering a table with two columns using angularjs directives.

<table>
<tr ng-repeat="message in messages" >
    <td ng-switch-on="message.network" ng-switch when="twitter" ng-controller="TweetController">
        <span>
            <input type="checkbox" name="active" ng-checked="{{message.isPublished}}" data-id="{{message.socialId}}" ng-click="publishMessage($event)" />
        </span>
        <span>
            <img src="{{message.authorPicture}}" />
        </span>
        <span>{{message.createdAt}}</span>
        <span>{{message.network}}</span>
        <span>{{message.text}}</span>
    </td>
    <td ng-switch-on="message.network" ng-switch when="facebook" ng-controller="FacebookController">
        <span>
            <input type="checkbox" name="active" ng-checked="{{message.isPublished}}" data-id="{{message.socialId}}" data-createdAt="{{message.createdAt}}" ng-click="publishMessage($event)" />
        </span>
        <span>
            <img src="{{message.authorPicture}}" />
        </span>
        <span>{{message.createdAt}}</span>
        <span>{{message.network}}</span>
        <span>{{message.text}}</span>
    </td>
</tr>
</table>

I am facing an issue where the same message is rendering in both columns instead of separating into twitter and facebook columns. This results in duplicate content being displayed. Can someone please guide me on what I might be doing wrong?

javascriptangularjsangularjs-ng-repeatng-switch

Answer №1

For the sake of simplicity, let's reorganize the structure of the model:

$scope.messages = [
    [
        {
            "network": "twitter",
            ...
        },
        {
            "network": "facebook",
            ...
        }
    ],
    [
        {
            "network": "twitter",
            ...
        },
        {
            "network": "facebook",
            ...
        }
    ]       
]

HTML: 

<table>
    <tr ng-repeat="message in messages" >
        <td ng-repeat="msg in message">
            <div ng-if="msg.network == 'twitter'">
                <div ng-controller="TweetController">
                    ...
                    <span>{{msg.createdAt}}</span>
                    <span>{{msg.network}}</span>
                    <span>{{msg.text}}</span>
                </div>
            </div>
            <div ng-if="msg.network == 'facebook'">
                <div ng-controller="FacebookController">
                    ...
                    <span>{{msg.createdAt}}</span>
                    <span>{{msg.network}}</span>
                    <span>{{msg.text}}</span>
                </div>
            </div>
        </td>       
    </tr>
</table>

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 with React: Children's state is altering the state of the parent component

Question : Why is it possible for a child component to change the state of its parent when each component has its own state? Below is the complete code for my app: import React, { Component } from 'react'; import { render } from 'react-do ...

javascriptreactjsecmascript-6material-ui

Having trouble getting the select function to function properly in AngularJS

Struggling with binding a select in Angular and encountering some issues. Here is the HTML code snippet: <select name="event" ng-model="data.eventID" ng-options="event as event.name for event in events track by event.eventID"> <option value= ...

angularjsangularjs-directive

Combining arrays using checkboxes in React.js

As someone completely new to coding, my current endeavor involves learning React by developing a flashcard app for studying Japanese. The concept revolves around incorporating a series of checkboxes that facilitate the selection of either Hiragana or Kat ...

javascriptreactjs

Can you provide a tutorial on creating a unique animation using jQuery and intervals to adjust background position?

I am attempting to create a simple animation by shifting the background position (frames) of the image which serves as the background for my div. Utilizing Jquery, I aim to animate this effect. The background image consists of 6 frames, with the first fr ...

javascriptjquerycsssetinterval

Obtain the dimensions of the outermost layer in a JSON file

Could you please help me extract the dimensions (600*600) of the outermost layer from the JSON below dynamically? { "path" : "shape\/", "info" : { "author" : "" }, "name" : "shape", "layers" : [ { ...

javascriptjson

Animate a box moving continuously from the right to the left using jQuery

I'm trying to create a continuous motion where a box moves right, then left, and repeats the cycle. However, I can only get it to complete one cycle. $(document).ready(function() { function moveBox() { $('#foo').css({ 'ri ...

javascriptjqueryhtml

Identifying Mistakes during Promise Initialization

Looking for a more efficient way to work with Bluebird promises Promise.resolve() .then(function() {return new MyObject(data)}) .then.....etc .catch(function (e){ //handle it}) I am dealing with MyObject and data coming from an external sourc ...

javascriptnode.jspromisebluebird

The specified file ngx-extended-pdf-viewer/assets/pdf.js cannot be found

I have integrated the ngx-extended-pdf-viewer package in my Angular application using npm to enable the display of PDF content. According to the setup instructions, I have added the following configuration in my angular.json file: "assets": [ ...

javascriptnode.jsangulartypescriptpdf

Clicking a link will trigger a page refresh and the loading of a new div

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> $(window).load(function () { var divs = $( #add_new, #details"); $("li a").click(function () { ...

javascriptphpjqueryhtmlajax

Transform Dynamic Array to JSON structure

I am currently developing a feature in my SvelteKit application that allows users to create custom roles for themselves. Users can input a role name and add it to an array, which is then displayed below. https://i.stack.imgur.com/oUPFU.png My goal is to ...

javascriptarraysjson

Find and replace string words containing special characters such as $ or !

Looking to process an input string in a specific way - // Input string - 'My pen cost is !!penCost!! manufactured in $$penYear$$ with colors !!penColor1!! and $$penColor1$$' // Processed string 'My pen cost is <penCost> manufactured ...

javascriptregex

Deploying an Angular application created using Yeoman to Heroku

I have been following some instructions on how to deploy my project, such as this guide or this tutorial. However, I am unable to get it to work properly. This is the code in my server.js file: var app, express, gzippo, morgan; gzippo = require('gz ...

javascriptangularjsherokugruntjsyeoman

Exploring the best way to use $set in Mongoose for dynamically updating an embedded

I'm currently attempting to create a unique function that can update the value of a specific embedded MongoDB document within an array. The goal is to change the value based on its position. function removeAddress(accountNum, pos) { const remove ...

javascriptnode.jsmongodbmongoose

How can I make a method in VueJS wait to execute until after rendering?

There is a button that triggers the parse method. parse: function() { this.json.data = getDataFromAPI(); applyColor(); }, applyColor: function() { for (var i=0; i<this.json.data.length; i++) { var doc = document.getElementById(t ...

javascriptvue.jsvuejs2

Struggling to create an access token with the Slack API

My goal is to retrieve an access token from the Slack API. When I use the code provided below, it generates an authorization URL containing a temporary code in the query string. Once permissions are granted, the process redirects to /slack/oauthcallback. ...

javascriptnode.jsaccess-tokenslack-api

AngularJS UI-Grid not displaying JSON data

Just started learning AngularJS and everything was going smoothly until I hit a roadblock... I have been struggling to display the JSON data returned from my REST service call. While hard-coding a data array in my controller works fine, displaying the act ...

javascriptangularjsjsonangular-ui-grid

When you click on the submit button, it triggers the associated event

I have multiple text input fields where pressing the enter key should move focus to the next field. After reaching the last text input, I want the focus to be on the submit button without triggering its click event until the user presses enter again. The c ...

javascriptjqueryfocus

Enhancing ag-grid with alternating row group colors following row span

My data structure is shown below: https://i.stack.imgur.com/fy5tn.png The column spanning functionality in ag-grid is working for columns 1 and 2 as expected. However, I am looking to implement alternate row colors based on the values in column 2 (animal ...

javascriptpythoncssag-grid

Invisibility of form data on new page - PHP and Javascript

I have a webpage with multiple hyperlinks. Each hyperlink should redirect the user to a new page with the URL sent as POST data. What I can do: 1. Open the new page successfully. The issue I'm facing: 1. On the new page, I cannot access the URL ...

javascriptphpjqueryhtmlajax

Retrieve information from a changing HTML table

I am working on a nodejs express project that features a Dynamic Table within my application. Users can add or remove rows and enter values into cells, but I am struggling to extract these values from the table without using jquery. My goal is to then inse ...

javascriptnode.jsexpress