Angularjs显示有关点击

Question

我目前正在显示用户可以在下拉菜单中调用的操作列表。

我想在您点击它时显示与操作相关的所有信息。

到目前为止我已经知道了这一点：

＆＃13;

＆＃13;

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);
    }
}]);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我在html中使用getOperation（operation）函数在javascript控制器中完全发送操作对象。 操作对象包含描述，返回类型和参数列表等字段。

我想在下拉菜单中点击操作时显示这些字段。

提及：我使用AngularJS 1.6.1

非常感谢任何帮助！

Answer 1

试试这个。在按钮上点击调用一个函数并将$scope.displayDropdown设置为true。并更改<ul class="dropdown-menu" ng-if="displayOperation">

＆＃13;

＆＃13;

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);
  }
}]);

＆＃13;

.dropdown-menu {
   padding:10px;
  border: 1px solid red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;