Displaying data from client script to HTML?

JDX7913
Tera Guru

Right now I have a panel that is displaying everyone in my group (pulling it from an array). What I am trying to do is that if I click on for example "John Doe" then another panel show pop up with that name.

So far I am only able to implement a way where if I click on "John Doe" an alert will come up with his name and the index of the element on the array. 

My question is how do I "toggle" the second panel (e.g. how do I take the index number and the element itself and display it on the second panel once I click on the name that I want to display).

This is my code so far: (This is the panel that contains everyone's name in my group)

<div class="panel-body scroll">
  <div ng-repeat="name in data.finalName track by $index">
      <button class="button" ng-click="triggerTest($index)">  
        {{data.finalName[$index]}}     <!--Array of names-->
       </button>
   </div>
</div>     

 This is my second panel that I want to display the name that I've clicked on

<font size="4">
     <p>Name:  </p> <br>
</font>

This is my client script that I am currently having it to display the name and the index number of the element when clicking on the button:

function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce, i18n, $timeout, $log, spAriaUtil) {
  /* widget controller */
  var c = this;	
	$scope.triggerTest = function(num){
		alert($scope.data.finalName[num]);
	}
}

 

 

 

1 ACCEPTED SOLUTION

Jon Barnes
Kilo Sage

You can create a variable for this in your scope, like this:

function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce, i18n, $timeout, $log, spAriaUtil) {
  /* widget controller */
  var c = this;
  
  $scope.triggerTest = function(num){
    c.selectedIdx = num;
    c.selectedName = $scope.data.finalName[num];
    alert($scope.data.finalName[num]);
  }
}

The panel:

<font size="4" ng-if="c.selectedName">
     <p>Name: {{c.selectedName}}</p>
     <p>Index: {{c.selectedIdx}}</p>
</font>

View solution in original post

2 REPLIES 2

Jon Barnes
Kilo Sage

You can create a variable for this in your scope, like this:

function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce, i18n, $timeout, $log, spAriaUtil) {
  /* widget controller */
  var c = this;
  
  $scope.triggerTest = function(num){
    c.selectedIdx = num;
    c.selectedName = $scope.data.finalName[num];
    alert($scope.data.finalName[num]);
  }
}

The panel:

<font size="4" ng-if="c.selectedName">
     <p>Name: {{c.selectedName}}</p>
     <p>Index: {{c.selectedIdx}}</p>
</font>

Thank you for the help! This is what I am looking for.