What is the process for modifying link labels in AngularJS?

Looking to update the link caption on my Plunker provided below:

            <ul class="bk_crs_rslt">
                <li ng-repeat="c in courses">
                    <h4> {{c.CourseName }}<img src="image/bk_ad_btn.jpg" /> </h4>
                    <p><span style="color:#337ab7;">{{c.CollegeName}}</span><br>{{c.CountryName}}</p>
                    <p>
                        <a href="#" ng-click="c.show = !c.show" ng-show="!c.show"><img class="info_arw" src="image/bk_down_arw.png" />More Information</a>
                    </p>
                    <div>
                        <p ng-show="!c.show">
                            <b>Tution Fee</b>     :  {{c.Fee}}<br>
                            <b>Level</b>          :  {{c.LevelName}}<br>
                            <b>Detail </b>        :  {{c.Detail}} <br>
                            <b>Duration </b>      :   {{c.Duration}}<br>
                            <b>Subject </b>       :  {{c.Subject}}<br>
                            <b>IELTS Score </b>   :  {{c.Score}}<br />
                        </p>
                        <p>
                            <a href="#" ng-click="c.show = !c.show"><img class="info_arw" src="image/bk_up_arw.png" />Hide Information</a>
                        </p>
                    </div>
                </li>

            </ul>      


</div>

https://plnkr.co/edit/lsIypaBviXNvEi7Pwok4?p=preview

I only want one link. When I click 'more information' the details should show, then change the link caption to 'hide information' and vice versa.

Please assist me with this request.

Answer №1

All already concealed :

Revise your code in this manner: https://plnkr.co/edit/tpz7RLxOdy8aUe2My63y?p=preview

<p ng-init="c.show = true" ng-show="c.show">
      <a href="#" ng-click="c.show = !c.show"><img class="info_arw" src="image/bk_down_arw.png" />More Information</a>
</p>
<div ng-show="!c.show">
  <p>
    <b>Tution Fee</b> : {{c.Fee}}<br/>
    <b>Level</b> : {{c.LevelName}}<br/>
    <b>Detail </b> : {{c.Detail}}<br/>
    <b>Duration </b> : {{c.Duration}}<br/>
    <b>Subject </b> : {{c.Subject}}<br/>
    <b>IELTS Score </b> : {{c.Score}}<br />
  </p>
  <p>
    <a href="#" ng-click="c.show = !c.show"><img class="info_arw" src="image/bk_up_arw.png" />Hide Information</a>
  </p>
</div>


All previously disclosed:

Alternatively, you may consider something along these lines: https://plnkr.co/edit/JVpuFqA9b05w5kjAnZGN?p=preview

<p>
  <a href="#" ng-click="c.show = !c.show" ng-show="c.show">
    <img class="info_arw" src="image/bk_down_arw.png" />More Information</a>
</p>
<div ng-show="!c.show">
  <p>
    <b>Tution Fee</b> : {{c.Fee}}<br/>
    <b>Level</b> : {{c.LevelName}}<br/>
    <b>Detail </b> : {{c.Detail}}<br/>
    <b>Duration </b> : {{c.Duration}}<br/>
    <b>Subject </b> : {{c.Subject}}<br/>
    <b>IELTS Score </b> : {{c.Score}}<br />
  </p>
  <p>
    <a href="#" ng-click="c.show = !c.show"><img class="info_arw" src="image/bk_up_arw.png" />Hide Information</a>
  </p>
</div>

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

What is the best way to send the filtered information retrieved from a Custom Pipe to a Child Component?

Main Component <app-search-bar (sender)="searchVideo($event)"></app-search-bar> <ng-container *ngFor="let video of videos | search: query; let i=index;"> ... </ng-container> <app-pagination (sender)="se ...

Increase the dimensions of the jQuery modal confirmation box

I am working on a jQuery confirmation dialog that displays some details for the user. My goal is to have the dialog adjust its dimensions after the user clicks "YES" to show a smaller text like "Please wait...". How can I dynamically change the size of the ...

Creating a JavaScript pop-up featuring a dynamic table (example using Leaflet.js)

If you explore the leafletjs quickstart guide, specifically in the section labeled "Working with popups", try clicking on the blue marker displayed on the map. A popup will appear with the simple text "hello". But wouldn't it be interesting to have th ...

Is it possible to run TypeScript-transpiled code in a browser directly with es6-style classes and import statements without the need for an extra transpilation

When I transpile TypeScript code using target:"es5" for es6-style classes and React, the resulting transpiled code in my intended entry point (in this case a file named App.ts) looks something like this: Object.defineProperty(exports, "__esM ...

Customizing CSS to differentiate the color of active card headers in a Bootstrap accordion

I currently have a basic bootstrap accordion set up, as shown below. My goal is to style the .card-header element of only the expanded .card section without impacting the other .card-header elements. Is there a way to specifically target the expanded ite ...

Karma Jasmine: No executions and no errors detected

I recently started diving into Angular Testing using Karma and Jasmine. However, I encountered an issue after running karma init and creating my first test for a home controller - the result showed Executed 0 of 0 ERROR. It seems like the files are not bei ...

Bing Translator and XMLHttpRequest are two powerful tools for translating and

When running the code snippet below, I encounter an issue where I am not receiving status 200 and responseText. However, when using the following URL: http://api.microsofttranslator.com/V2/Http.svc/GetLanguagesForTranslate?appId=F1B50AB0743B541AA8C070890 ...

The onmouseenter event does not seem to trigger for descendants of a button element in Firefox

Regarding the current layout: <button><span>foo</span></button> In Firefox, the onmouseenter event on the span does not trigger. However, in Chrome it works as expected. When wrapping elements other than buttons are used, the even ...

What is the best way to export multiple modules/namespaces with the same name from various files in typescript within index.d.ts?

I am currently in the process of creating a new npm package. I have two TypeScript files, each containing namespaces and modules with the same name 'X'. At the end of each file, I declared the following: export default X; My goal is to import bo ...

The parser encountered an unexpected token while attempting to parse the provided string

Struggling to correctly parse a JSON response from a server using node, as it is showing up as a string. Here's an example: "{name:'hello'}" Recreated the issue here: http://jsfiddle.net/x5sup14j/ Tried replace(/'/g, '"'); ...

Upon making an Ajax request, Django responds with a 404 error indicating that the

In my initial Django project, I am now working on incorporating Ajax requests using jQuery to retrieve data. However, when attempting the Ajax request, I encounter the following error: GET http://localhost:8000/ajax/teams_for_issue/?medIssue=MI6 404 (Not ...

Sending the information entered in a modal to be displayed in a div

Imagine a scenario where you can: 1. Click on one of the divs (1, 2, 3). 2. Trigger a modal window to open. 3. Input text into the modal's text field. 4. Click the save button. 5. Witness that text being displayed in the .item-edit section of the ...

Popup window displaying a distinct document address

Struggling to make my modal function properly. Within my main application document, I have the code for the modal to open a different document. When I click on the document link alone, it works fine. However, when trying to open it within the modal, it can ...

Unlock real-time alerts with the power of JavaScript and PHP!

I am currently working on enhancing my skills in javascript. I have a basic idea of what I want to achieve. My goal is to create an automated javascript function that accesses a php page. This php page will create an array of new notifications for the ja ...

Is there a way to access the value of an IPC message beyond just using console log?

I am developing an app using electron and angular where I need to send locally stored information from my computer. I have successfully managed to send a message from the electron side to the angular side at the right time. However, I am facing issues acce ...

Mastering AngularJS: The ultimate guide to effectively binding service properties

Seeking the most effective method for binding to a service property in AngularJS. I have explored various examples to grasp how to bind to properties in a service created using AngularJS. Presented below are two examples demonstrating how to bind to serv ...

How to dynamically pass variables to MongoDB queries in a Meteor application

Starting a simple meteor app to search a database and running into some issues. I have an input box where the search query is obtained using the code below: Template.search.events = { 'keydown input#search' : function (event) { if (event.whi ...

The function URL.createObjectURL() is failing to work across all browsers

Despite my efforts, I'm feeling tired as none of the solutions seem to work for me. Here is the HTTP call in Angular that I am struggling with: $http({ method: 'GET', url: API_URL + 'v1/file/' + candidateId + '/download& ...

Using JavaScript, convert a string into HTML content

When JSON renders this particular string as "I am $1$ frontend developer works at $2$ from $3$", I find myself wanting to dynamically replace $1$,$2$ and $3$ with HTML input text boxes. Therefore, the desired output should read: I am <-input textbox he ...

Creating a WebSocket service similar to stackoverflow using Node.js: A step-by-step guide

I'm currently developing a chat application using node.js. I have implemented a feature to receive new messages via ajax, where requests are sent every 3 seconds. However, I recently observed that stackoverflow handles fetching new data differently. I ...