Angularjs Display further information on click

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!

try this.On button click call a function and set $scope.displayOperation to true.And change <ul class="dropdown-menu" ng-if="displayOperation">. — XYZ
– XYZ, Commented Sep 6, 2017 at 8:29

XYZ · Accepted Answer · 2017-09-06 08:42:38Z

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>

Collectives™ on Stack Overflow

Angularjs Display further information on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related