Manipulate certain div elements with AngularJS

Is there a way to utilize Angular to edit specific divs on my page? I have multiple divs with table rows containing data. What I want is for a particular div to become editable when I click on an edit button within that div.

How can I properly link the click event to a specific div? This is what I've attempted so far:

<div ng-show="summary.abbData.service_type == 'NaoLan'" class="col-md-6" style="background-color: #ffffff; width: 325px; margin-left: 15px;">
    <h5 class="bg-primary rmpad15" style="margin-top: 1px; padding: 5px;">{{summary.abbData.service_type}}<button type="button" ng-click="editAbb(customer.id)" class="btn btn-default btn-xs" style="float: right; margin-top: -3px;"><span class="glyphicon glyphicon-pencil"></span></button></h5>
    <table class="table table-condensed pad1">
    <tbody>
        <tr>
            <td><strong>Speed</strong></td><td>{{summary.abbData.service}}</td>
        </tr>
        <tr>
            <td><strong>Apartment Number</strong></td><td>{{summary.abbData.apartment}}</td>
        </tr>
        <tr>
            <td><strong>Monthly Fee</strong></td><td>{{summary.abbData.month_fee}}kr</td>
        </tr>
        <tr>
            <td><strong>Connection Fee</strong></td><td>{{summary.abbData.conn_fee}}kr</td>
        </tr>
        <tr>
            <td><strong>Contract Term</strong></td><td>{{summary.abbData.fixation}}months</td>
        </tr>
        <tr>
            <td><strong>Registration Date</strong></td><td>{{summary.abbData.reg_date}}</td>
        </tr>
    </tbody>
    </table>
</div>

I have included ng-click, but I am unsure of how to correctly bind the div to the click event. Any suggestions?

Answer №1

Check out this link jsbin.com/zataro/2/edit?html,output

<tr>
    <td><strong>Apartment Number</strong>
    </td>
    <td>
      <span ng-hide="edit.apartment">{{summary.abbData.apartment}}</span>
      <input ng-model="summary.abbData.apartment" type="text" ng-show="edit.apartment" />
    </td>
    <td>
      <button ng-click="edit.apartment=!edit.apartment">
        <span ng-show="!edit.apartment">Edit</span>
        <span ng-show="edit.apartment">Save</span> 
      </button>
  </tr>

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

Can the chosen date in a calendar date picker be linked to a variable that is accessible to a separate file?

Currently, I am developing a React application and have integrated a date picker feature using Ant Design to enable users to select a date range. My goal is to store the selected date value into a variable that can be accessed by another file in my progr ...

What is the best way to delete these <li> tags according to their respective timestamps?

When the page loads, there are initially 5 <li> elements. Additional <li> elements are then randomly added every few seconds. I want to remove any <li> elements that have been on the page for more than a minute. My plan is to create an ...

Avoid having Vue CLI delete all files in the dist folder

As I work on my Vue project, I am facing a challenge in syncing the dist folder with Git. Previously, this process ran smoothly when using webpack. However, after transitioning to @vue/cli and creating my project with vue create myProject instead of vue in ...

Exploring ways to incorporate various classes into my validate() elements using jQuery

I'm currently using the jQuery method validate to verify this particular form: <form id="emailRecover"> <div class="row light-field-container error-container"> <input type="text" id="dniPassword" name="dniPassword" requ ...

What is the process for exporting data from MongoDB?

Recently, I created a web application for fun using Handlebars, Express, and Mongoose/MongoDB. This app allows users to sign up, post advertisements for others to view and respond to. All the ads are displayed on the index page, making it a shared experie ...

Turning off ArrowUp and ArrowDown in React

Is there a way to prevent the ArrowUp and ArrowDown keys from changing the input value in an input field using React? How can I achieve this? So far, my attempted solution has been: function onKeyPressRegex(e) { if (!/[0-9]/.test(e.key) || e.key === &ap ...

Executing Code Upon Module Load and Presenting It as Middleware

I am currently delving into the intricacies of how exporting and importing modules function in Nodejs. One of my tasks involves using a specific file to seed a mongodb database. Surprisingly, this file operates flawlessly and delivers the desired results ...

Incorporating a personalized image to create custom icons on the Material UI bottom navigation bar

Is it possible to replace the default icon with a custom image in material ui's BottomNavigation component? I'm curious if Material UI supports this feature. If you'd like to take a closer look, here is the link to the codesandbox. ...

Retrieve data from external URL using API

I am encountering a captchas page when attempting to retrieve JSON data from a URL through my API. Even though I am trying to access an array of JSON data containing openPrice, highPrice, price, and lowPrice, all I seem to get is a captcha form instead of ...

What causes my `` to function intermittently?

I've been experimenting with adding attributes and styling to elements. Sometimes my code works perfectly fine, while other times it doesn't produce the desired output. Here's an example of when it works: $('.card-text') .text( ...

Trouble with AJAX request on iPad, works perfectly on desktop

Here is some of my custom plugin code (function ($) { $.fn.createGallery = function(options) { var theObject = $(this); var settings = $.extend({ // Default settings. server: 'http://localhost/jQuery%20Gall ...

The Google Maps display for this page failed to load properly on the map

<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> --> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async="" defer="defer" type="text/javascript">& ...

Effective strategies for integrating Bootstrap and AngularJS without relying on jQuery

Currently exploring AngularJS after experimenting with Twitter's Bootstrap. I appreciate Bootstrap for its simplicity, sleek design, and mobile-friendliness. On the other hand, I have noticed a trend where people recommend using AngularJS over jQuery, ...

Is there a way to check for invalid string literals within a string?

Looking for a way to test for invalid (unclosed) strings within a given string? This regex might help: /"[^"\\]*(?:\\[\S\s][^"\\]*)*"|'[^'\\]*(?:\\[\S\s][^'\\]* ...

Is there a way to select multiple elements with the same class using getElementByClassName instead of only obtaining the first element with that class designation?

I recently started learning JavaScript, and I'm still struggling to grasp many concepts. I'm currently working on styling buttons on my website to match the existing ones, but I'm unable to edit the plugin's HTML directly. I was able to ...

I am currently working with an input element that is set to hidden. I am trying to change its type to text using JavaScript, but I can't seem to figure out how to do it or if it is even possible

I'm stuck trying to change the type of an input element from hidden to text using JavaScript. I can't seem to figure out if it's even possible. Can someone please help me with this? Thanks! ...

Pass the value from JavaScript to PHP

I am looking to insert a JavaScript value into PHP: var temp = $('#field_id').val().charAt(0); The 'temp' variable returns values ranging from 1 to 4. var value = "<?php echo $variable[temp]['id']; ?>"; How can I re ...

Glitch in transmitting server data to client in MERN stack development

I am currently developing a MERN web application and I've encountered a bug in which the data retrieved from the server is not matching what is expected when making a GET request on the client side. Below is the controller function on the server for ...

Accessing an array in JavaScript for a D3 Stacked Bar Chart

Currently, I am utilizing this specific version of a D3 stacked bar chart. As it stands, when a user hovers over a segment of a bar, a tooltip displays the value of that particular segment. Nevertheless, my goal is to incorporate HTML that presents a lis ...

Tips for displaying the sum of a grouped field in the balloonText using Amchart

I recently started working with Amcharts and I am seeking advice on what I may be doing incorrectly. Below is the snippet of my JavaScript code: var chartData1 = []; generateChartData(); function generateChartData() { var month = new Array( ...