AngularJS Update Parent-Child Relationship: Enhancing the Details

When Panel header is clicked, I want to update the respective Panel body with the corresponding data. In my Angular code on Plunker, clicking "Test1" should only update "Test1detail" in the body.

Click here for the Plunker

Here's the code snippet from my Plunkr:

angular.module('myapp',[])
.controller('maincontroller',function($scope,myservice){
  var headings=['Test1','Test2','Test3']
  $scope.mainHeadings=headings

  $scope.GetDetail = function(header)
  {
    $scope.headerdetail = myservice.GetDetails(header);
  }

})

angular.module('myapp')
.service('myservice',function()
{
  var test1='test1 detail'; 
  var test2='test2 detail';
  var test3='test3 detail';

  var Details = function(det)
  {

    if (det=='Test1')
      return test1
    else if (det=='Test2')
      return test2
    if (det=='Test3')
      return test3
  }

  return {
    GetDetails: Details
  }

})

Answer №1

#1. Instead of setting the $scope.headerdetail property that is shared by all panels, consider setting the current iteration scope's headerdetail variable:

$scope.GetDetail = function(header) {
    this.headerdetail = myservice.GetDetails(header);
}

Demo: http://plnkr.co/edit/pzx1G2PjZrdazH8E5OnQ?p=preview

#2. It would be more efficient to work with an array of objects as your primary data structure:

var headings = [{title: 'Test1'}, {title: 'Test2'}, {title: 'Test3'}];

$scope.mainHeadings = headings;

$scope.GetDetail = function(heading) {
    heading.headerdetail = myservice.GetDetails(heading.title);
}

Then, you can set a property of the heading object:

<div class='panel panel-default' ng-repeat='heading in mainHeadings'>
    <div class='panel-heading pnlbld active' data-loaded='false' ng-click='GetDetail(heading)'>{{heading.title}}</div>
    <div class='panel-body'>
        {{heading.headerdetail}}
    </div>
</div>

Demo: http://plnkr.co/edit/zxB6LUoEarqmNJYy0ihk?p=info

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

Guide to resetting all ReactiveVars to false in Meteor JS

I am currently working on a recipe template where I am using {{#each recipes}} to render the recipes. I have implemented ReactiveVar to toggle the edit form of each recipe from hide to show. Everything is functioning correctly, but I want to ensure that ...

What is the method for assigning a class name to a child element within a parent element?

<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...

The user type is not yet loaded from Firestore when the view is rendered

I am currently in the process of developing an Ionic - Angular application that allows hospital patients to submit requests to nursing staff, who can then view the assigned requests based on the patient's room. Nurses have access to all requests, whil ...

Utilizing a function as a value in React state (setState) compared to defining state with constructor in a class and utilizing a state object

Can someone help me understand the concept of state in React better? I'm confused about the differences between these two implementations: This: class Todo extends ... { constructor (){ super() this.state = { ... } } } And This: class Todo extend ...

The key up event in JQuery does not seem to be triggered when selecting the second option in the Select2 plugin's multi

Encountered an issue with the select2 plugin while trying to change the option list based on user input for the second multiple option. The first time I enter text in the multi-select field, the keyup event is triggered and an ajax function is called to b ...

When using jQuery's POST method, the "done" event is triggered, however, no data is being sent

I've been working on implementing AJAX form submission and wrote a function to handle it when the button is clicked: function putUser() { $('button#putUser').on('click', function() { var user = $('input#user' ...

Why am I unable to utilize an array in this manner in JavaScript, and what is the method for accessing the array using a calculated number?

var nodesXY = ['15% 15%','30% 16%','19% 42%','39% 80%',]; var number = ["0","1","2","3","4","0","0","0"]; //some loop AccesNodes(number[1]); function AccesNodes(number){ console.log(number); // ...

The error callback encountered {"readyState":4,"status":200,"statusText":"success"} while processing

When I make a call to this url, the response is a JSON object when done directly in the browser. However, when I try to do it via ajax using the following code snippet: $.ajax({ url: url, type: "GET", dataType:"jsonp", succ ...

Designing a custom HTML calendar

I am currently working on a school project where I am creating a calendar using HTML. So far, I have set up the basic structure of the page. What I want to achieve is a functional calendar where users can create appointments that will be displayed accordi ...

Creating a personalized .hasError condition in Angular 4

I am currently in the process of modifying an html form that previously had mandatory fields to now have optional fields. Previously, the validation for these fields used .hasError('required') which would disable the submit button by triggering a ...

What is the process for retaining data in mongoose without generating a new database object?

Whenever I try to save data using a bot command, a new object is created every time the data is submitted. I want to ensure that only one object is created, but every time the same user submits data, it should automatically update rather than create a new ...

Changing all object values to true with React useState

In a certain file, I have defined an object with the following structure: export const items = { first: false, second: false, third: false } Within a component, I am using this object as shown below: import { items } from 'file'; const [el ...

What is the best way to swap the values of options between two input select elements?

I am trying to create a feature where I have two select dropdowns with the same options, and when a trigger is clicked, the option values are inverted between the two selects. Here is an example: <select id="source_currency"> <option value="BRL" ...

Working with Garber-Irish in Rails: Streamlining Administration and Keeping Code DRY

I am currently implementing the innovative garber-irish technique to organize my JavaScript files. Here's my issue: I have a Model (let's call it Item) with an init function located in app/assets/javascripts/item/item.js For example: MYAPP.ite ...

Modifying the menu with Angular 4 using the loggedInMethod

Struggling to find a solution to this issue, I've spent hours searching online without success. The challenge at hand involves updating the menu item in my navigation bar template to display either "login" or "logout" based on the user's current ...

Fetching arrays in Javascript

I am utilizing the Dragsort plugin and aiming to tag IDs in an array for printing. Here is my HTML code: <ul id="list1"> <li class="ss"><div>1</div></li> <li><div>2</div></li> <li>&l ...

Manipulating nested arrays in AngularJS by using the Splice method

Hey there, I need some assistance with removing an element from a nested JSON array like the example below: JSON [{ "id": 1, "name": "Furniture & Fixture", "choice": { "0": { "req_goods": "table", "qty": "1 ...

Creating an if statement that validates whether all variables have non-null values

I am still getting the hang of javascript and working on some coding projects from my textbooks. The current task involves creating an if statement to check if the values of the elements referenced by the names fname, lname, and zip are all not null. Here ...

Having trouble using the elementIsNotVisible method in Selenium WebDriver with JavaScript

I'm struggling to detect the absence of an element using the elementIsNotVisible condition in the Selenium JavaScript Webdriver. This condition requires a webdriver.WebElement object, which is problematic because the element may have already disappear ...

What is the method for entering text into a Code Mirror line using Selenium?

When I use IE to enter text into a CodeMirror-line text box, the text disappears when I try to save it. I have attempted using JavascriptExecutor to write to the CodeMirror, but it seems to only be for visual purposes. How can I input text into the code mi ...