Using Angular's ng-repeat directive to iterate over a list of <li> elements containing strings with

  • Query:

    <li ng-repeat='msg in msgs'>{{msg}}</li>
    

  • Directive:

    msgs=['abc','a
                 b
                 v', '123']
    
    msgs.push('Something entered from textarea, possibly containing line breaks')
    

  • Desired Outcome:

    • abc
    • a
      b
      v
    • 123

  • Issue with Line Breaks:

    • abc
    • a b v
    • 123

  • Possible Solution Attempt:

    attempted to refactor < li> label to <myli>
    
    app.directive('myli', function ($rootScope) {
        return {
            restrict: 'E',
            replace: true,
            template: "<li></li>",
            link: function(scope, element, attr) {
                element.append(scope.msg);
            }
        }
    });
    

    However, this did not produce the desired result, as it only altered the initial data.

    When appending something to msgs that contains line breaks, the line breaks are converted to spaces.

    Seeking assistance

  • Answer №1

    To enhance the appearance of text on a webpage, you can utilize the CSS white-space property...

    angular.module('so', []).run(function($rootScope) {
      $rootScope.msgs = ['abc', `a
                 b
                 v`, '123'];
    
      $rootScope.msgs.push('Adding input from a textarea, which may contain line breaks')
    });
    li {
      white-space: pre-line;
    }
    <ul ng-app="so">
      <li ng-repeat="msg in msgs">{{msg}}</li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

    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

    The reason behind the successful execution of the final .then in promise chaining

    I am new to JavaScript and have encountered an interesting problem with the following code. Even though I haven't returned anything from the .then method, the last .then (blue color) works instead of the first one (red color). Can someone explain why ...

    Problem with transferring information to a fresh browser tab in Internet Explorer using AngularJS

    Looking for a way to pass objects to a new browser window? Check out this suggestion from AngularJS: open a new browser window, yet still retain scope and controller, and services. While it worked on Chrome, I encountered issues with IE. The shared object ...

    Is there a way to automatically change specific characters as a user types in an input field?

    I'm facing an issue with replacing some characters dynamically. The goal is to ensure that user-input text is URL-friendly for constructing a URL: function slugify(string) { const a = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïí ...

    jQuery is unable to locate elements

    Here is a JavaScript code snippet that I have: (function($, undefined) { $("a").click(function(event) { //or another elemtnt alert('Hello!'); }) })(jQuery); Also, here is the link being referenced in the code: <a href="http: ...

    Adding Firebase Authentication to my AngularJS website

    I am currently creating a school website using AngularJS. My goal is to incorporate account functionality through firebase authentication. However, I have limited experience with Javascript and find working with AngularJS and implementing firebase to be ...

    Obtaining an image from a URL, saving it, and then animating it? That definitely

    Looking to create a dynamic animation with images that update every 15 minutes from the following URL: How should I go about storing and looping through the most recent 24 images for the animation? Is using a MySQL database the best option or are there o ...

    Refreshing the Table to Update Data

    I am working on a jquery application that includes a table with time and number fields. My goal is to increment the values every 3 seconds by creating a function to update the numbers automatically. Initially, the data in the table looks like this: Kobe ...

    Exploring the dynamic duo of chardinJs and Angular

    Currently, I am in search of a plugin/js that can provide my users with a brief walkthrough of my website. Both jQuery and Angular are being used on my page. I have previously utilized Chardin.js (https://github.com/heelhook/chardin.js). While this plugin ...

    Container containing sliding content underneath

    I've designed a grid with separate boxes that reveal related content when clicked. The display of this content is achieved using jQuery's slideToggle feature. The setup functions smoothly, with each row containing clickable boxes that unveil the ...

    I desire to incorporate a subtle fading effect into the script

    I have written the script code and now I am looking to add a fade effect to it. Can anyone guide me on how to achieve this? Your help is much appreciated! ※I used an online translator as English is not my native language. Please bear with any awkward ph ...

    React Sticky sidebar implementation throughout the various components

    My goal is to implement a sticky sidebar that moves smoothly across specific components on my webpage. The challenge I am facing is that the CSS 'sticky' property only allows movement within the component it was created in. So, my question is - w ...

    Is there a way to invert the order of elements in a scrollable container in Google Chrome?

    The code snippet provided creates the desired effect, but unfortunately, it only seems to function properly in Firefox and Edge. In Chrome, while the elements are stacked correctly, there is no horizontal scroll bar, making the rightmost items hidden and i ...

    What is the significance of [Function: bound ] in the context of node debugging?

    So I was trying to debug my .js file using node debug and when I used catch(error) { It only displayed [Function: bound ] when I tried console.dir(error) What is causing this issue? How can I access the full error object? And how do I retrieve the stack ...

    Developing a Jquery solution for creating radio buttons layout

    Looking to create a radio button functionality within different groups using multiple select. For Group A: If the user selects A1, then it should automatically deselect A2 and A3. If the user selects A2, then it should automatically deselect A1 and A3. I ...

    What is the reason that <span> elements do not automatically wrap around to the next line when they are in line with each other without any white space?

    Once upon a time, I believed that line breaks had no impact on the rendering of HTML due to minification. However, I recently discovered something peculiar. <!DOCTYPE html> <html> <body> <style> div { width: 200px; background: ...

    Instructions for incorporating a personalized document in NextJs version 13

    In order to enhance the design of my upcoming Next.js 13 project, I am looking to integrate a custom design system package. This particular package necessitates the creation of custom documents within the page directory, as outlined in the official Next. ...

    numerous state controllers in the UI-Router

    How can multiple controllers be added for state in ui-router? I have searched extensively but have not found any helpful solutions yet. What am I missing? I am unsure of what steps to take next. All the details are provided below. Despite trying, I have n ...

    Is there a way to apply filters to jquery datatables during initialization process?

    Is there a way to server-side filter datatable during initialization? I attempted the following code: function tableFilter(arg1, param2, value3) { var searchTable = $("#tblsearch").dataTable({ "bRetrieve": true, "b ...

    Calculating the median in JavaScript utilizing a for loop

    Currently, I am in the process of learning JavaScript. My goal is to calculate the median of a set of numbers that I input through a prompt when I click the button labeled "find median". function CalculateMedia() { var n = prompt("Enter the number of e ...

    The Reliability of Using CSS Pixel Font Sizes

    Imagine I need to display two capital 'T's, each exactly one inch tall. One 'T' appears on a Macbook Pro with Retina Display (220 DPI, CSS pixel ratio 2), and the other on an iPhone 4S (326 DPI, CSS pixel ratio 2). To achieve this, I se ...