- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-31-2018 09:27 AM
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]);
}
}
Solved! Go to Solution.
- Labels:
-
Scripting and Coding

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-31-2018 09:47 AM
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>

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-31-2018 09:47 AM
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>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-31-2018 10:11 AM
Thank you for the help! This is what I am looking for.