Angularjs Display further information on click - html

Question

I'm currently displaying a list of operations that the user can invoke in a dropdown menu.
I want to display all the information related to an operation the moment you click on it.
I've got this so far:
app.controller('selectAll', ['$http', '$scope' , '$rootScope', function ($http, $scope, $rootScope) {
$scope.response;
$scope.operations;
$scope.operationDetails;
$rootScope.$on("invokeSelectAll", function(){
$scope.invokeSelectAll();
});
$scope.invokeSelectAll = function(){
$scope.response = $http.post('/invoke/selectAll/', $rootScope.dataObj);
$scope.object = $rootScope.object;
$scope.response.then(function(data) {
$scope.responses = data.data ? data.data : "Select Operation not supported on this bean";
});
};
$scope.getOperation = function (operation) {
$scope.operationDetails = operation;
console.log(operation);
}
}]);
<div ng-controller="selectAll">
<div align="left">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Choose operation
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="operation in object.operations">
<a href="#" ng-click="getOperation(operation)">
{{operation.name}}
</a>
</li>
</ul>
</div>
</div>
</div>
I'm using the getOperation(operation) function in html to send the operation object altogether in the javascript controller.
The operation object contains fields like description, return type and a list of parameters.
I want to display those fields when you click an operation from the dropdown menu.
Mentions: I use AngularJS 1.6.1
Any help would be much appreciated!

Answer 1

Try this.On button click call a function and set $scope.displayDropdown to true.And change <ul class="dropdown-menu" ng-if="displayOperation">
var app = angular.module('testApp', []);
app.controller('selectAll', ['$http', '$scope', '$rootScope', function($http, $scope, $rootScope) {
$scope.response;
$scope.operations;
$scope.operationDetails;
$scope.displayDropdown = false;
$scope.showDropdown = function() {
$scope.displayDropdown = true;
}
$rootScope.$on("invokeSelectAll", function() {
$scope.invokeSelectAll();
});
$scope.invokeSelectAll = function() {
$scope.response = $http.post('/invoke/selectAll/', $rootScope.dataObj);
$scope.object = $rootScope.object;
$scope.response.then(function(data) {
$scope.responses = data.data ? data.data : "Select Operation not supported on this bean";
});
};
$scope.getOperation = function(operation) {
$scope.operationDetails = operation;
console.log(operation);
}
}]);
.dropdown-menu {
padding:10px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="selectAll">
<div align="left">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" ng-click="showDropdown()">
Choose operation
<span class="caret"></span></button>
<ul class="dropdown-menu" ng-if="displayDropdown">
<li ng-repeat="operation in object.operations">
<a href="#" ng-click="getOperation(operation)">
{{operation.name}}
</a>
</li>
</ul>
</div>
</div>
</div>