Click on ng-show to reveal more text in AngularJS

I am attempting to display an ellipsis for the content within a div, along with a '...more' text. Additionally, I am working on using ng-click to show the full text when '....more' is clicked.

My goal is to add a hover class upon clicking, but I am facing difficulties in connecting the click event to reveal more text.

View my fiddle here

<div ng-controller="MyCtrl" id='divEllipseContainer' class="{{class}}" ng-click="showEllipseContent()">
  Chandra is in office with his beautiful wife with sour cream on her face.
</div>

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.class = "appEllipseContent";

    $scope.showEllipseContent = function(){
        if ($scope.class == "appEllipseContent")
            $scope.class = "";
         else
             $scope.class = "appEllipseContent";
    };
}

.appEllipseContent {
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width:200px;
}

.appEllipseContent:hover {
    overflow: visible;
    white-space: normal;
}
javascriptcssangularjsellipsis

Answer №1

Combine ng-class and ng-click to add a class based on a boolean value, as shown below:

index.html

<!DOCTYPE html>
<html ng-app>
  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcac5ccdec7cad985c1d8eb9a8598859b">[email protected]</a>" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div ng-class="{'appEllipseContent': !isActive, 'appEllipsetContenthover': isActive}"
         ng-click="isActive = !isActive">
         Chandra is in the office with his beautiful wife while she has sour cream on her face.
    </div>
  </body>      
</html>

style.css

.appEllipseContent {
  overflow: hidden;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  width:200px;
}

.appEllipseContenthover {
  overflow: visible;
  white-space: normal;
}

Check out this example.

Answer №2

Take a look at this, I believe it is what you were looking for.

[http://jsfiddle.net/HB7LU/23727/]

HTML 

<div  id= 'divEllipseContainer' ng-mouseover="test2()"  class="{{class}}" >
  Chandra is in office with his lovely wife who has sour cream on her face. 
</div><a ng-hide="test" ng-mouseleave="test2()" ng-click="showEllipseContent()">...more</a>
</div>

JS

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.class = "appEllipseContent";
$scope.test = true;

$scope.showEllipseContent = function(){

    if ($scope.class == "appEllipseContent")
        $scope.class = "";
     else
        $scope.class = "appEllipseContent";
   };

   $scope.test2 = function(){
       if ($scope.test)
        $scope.test = false;
     else
        $scope.test = true;
};
}

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

Divide Angular ngFor into separate divs

Here is an example of my current array: [a, b, c, d, e, f, g, h, i] I am aiming to iterate through it using ngFor and split it into groups of 3 elements. The desired output should look like this: <div class="wrapper"> <div class="main"> ...

javascriptangular

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

Trying to truncate long text in a v-autocomplete component using Vuetify 3 and text-overflow: ellipsis, but it's not working. Check out the code below: <div id="app"> <v-app id="inspire"> <v-row align="cen ...

javascriptcssvuetify.jsv-autocomplete

Whenever the Redux Store is accessed outside of a React Component, it will consistently retrieve the initial

When working with a React Redux app that is built on top of the Keftaa/expo-redux-boilerplate boilerplate and utilizes redux-persist, how can we retrieve the persisted Redux store from a non-React component? Issue: I am uncertain about the method to acces ...

javascriptreactjsreduxreact-reduxredux-persist

Contrasting the use of jQuery versus AJAX for updating static page text

While I haven't fully grasped the concept of AJAX yet, my understanding is that it can be beneficial for updating specific parts of a webpage. Does using AJAX only make sense when you require server interaction? I am looking to replace text on a webp ...

javascriptjqueryajax

the styling gets disrupted by the addition of grid columns

Looking for help with aligning and spacing three sets of strings in a single line while maintaining grid columns intact, even when window size is reduced. Currently experiencing alignment issues like this: https://i.stack.imgur.com/iqlam.png Tried removi ...

htmlcssangular-bootstrap

Issue with the div elements not aligning next to each other

I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected. I have tried using flex, bootstrap ...

htmlcss

The enigma of the mysterious karma provider error

As a newcomer to unit testing in JavaScript, AngularJS, and Karma, I have successfully written passing tests for controllers. However, when trying to test services, I encountered an error: Unknown provider <- nProvider <- User. The User service is th ...

angularjstypescriptkarma-runner

What is the best way to trigger an event using vue-chartjs?

I am using vue js to display a graph with chartjs. I have implemented an onClick function on the graph to emit an event in the parent component and retrieve data. However, the event is not working as expected. Can you help me identify the issue? Component ...

javascriptvue.jsvuejs2chart.jsvue-chartjs

Is there a concept of negative margin "wrapping"?

I am currently working on the website . I am facing an issue where the left arrow is not appearing in the same position as the right arrow. When I try to mirror the same adjustment I made for the left arrow by using margin-left: -75px, it seems to 'wr ...

htmlcss

"Optimize Your Data with PrimeNG's Table Filtering Feature

I'm currently working on implementing a filter table using PrimeNG, but I'm facing an issue with the JSON structure I receive, which has multiple nested levels. Here's an example: { "id": "123", "category": "nice", "place": { "ran ...

javascriptnode.jsangulartypescriptprimeng

Material UI in React: A lengthy typography body necessitates a line break

Currently using the Material UI grid system to create two columns side by side. However, due to the Lorem ipsum text length, the right column is pushed down to a new row. Shortening the text will allow it to be displayed properly in two columns. <Grid c ...

javascriptreactjsmaterial-ui

Is it possible to prevent users from clearing data in an Android application when using Ionic framework?

Currently, I am developing an app using the Ionic framework. The data is being stored on the mobile device via SQLite, but there is a concern that users can easily clear this data by clicking on the "clear data" button in the application info settings. The ...

androidangularjsionic-framework

What is the best way to include React globally when running unit tests?

In my Rails project, I have integrated the react-rails gem, which sets up a global variable like this: window.React = React; While this is convenient for regular usage, it causes issues when running unit tests with Jest because the global React variable ...

javascriptruby-on-railsreactjsjestjsreact-rails

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

What causes the cleanup function in React hooks to be triggered upon reopening a previously closed tab?

There seems to be an issue with closing a tab and then undoing that action. This causes all the cleanup functions in the component to execute, resulting in the abortion of new fetches needed to load the component. This behavior is observed only on Safari ...

javascriptreactjserror-handlingreact-hookssafari

What is the best way to have an image trail another in JavaScript coding for my game?

Hey, can someone help me create a zombie game where a zombie image moves towards a player image (zs.png) at a specific speed and decreases the player's health upon contact? This game is designed for the 3ds browser, so it must be coded in JavaScript ...

javascripthtml

`Incorporating dynamic link filtering in vis.js`

Can links and nodes be filtered in a vis.js network? I have configured a DataSet for both nodes and edges as follows: function drawNetwork(container){ var nodes = new vis.DataSet(); populateNodes(nodes); // implementation details skipped ...

javascriptgraph-visualizationchap-links-library

Leveraging the power of Google Charts along with MySQL or

I've been working on this task for several days now and I'm still struggling to achieve the desired outcome. My goal is to dynamically create a column/bar chart using Google Charts, populated with data from my database. Here's my query: SE ...

phpjavascriptmysqljsongoogle-visualization

extracting URL parameters using AJAX

I have successfully created an AJAX request using the GET method, passing variables to the URL and receiving a response. Now, I need to retrieve the current URL variables by clicking on a newly created button in order to proceed with further processing. Th ...

javascriptajaxurlget

Is there a built-in method in Next.js 13 to secure routes from unauthorized access?

In my project, I have the following pages: /about, /user, and /user/[id]. Unfortunately, I am unable to access req.page, which provides the slug (i.e. /user/[id]), making it difficult for me to implement logic to redirect requests from unauthenticated user ...

javascriptnext.jsroutes