Как вызвать функцию, когда angularjs аккордеон открыт только

Привет, я использую Angularjs UI Bootstrap гармошкой. Здесь я хочу позвонить, когда пользователь нажимает на гармошке вызов одной функции и получить пользователя

Вот код, пожалуйста, помогите мне спасибо заранее

$scope.load_userdata= function(user_id) {
     console.log(user_id);
    }
<uib-accordion close-others="oneAtATime">
  <div uib-accordion-group class="panel-default" ng-repeat="user in users">
     <uib-accordion-heading ng-click="load_userdata(user.id)">
       <div class="table">
        <div style="width: 50%">
           @{{user.name}}             
        </div>
        <div>
          Load user data
         </div>
       </div>
       </uib-accordion-heading>
  </div>
</uib-accordion>

данные и отображать их

Источник

1 ответ

Я не очень понимаю, в чем проблема. Я скопировал ваш шаблон в фрагмент ниже и добавил простой контроллер с рабочим примером.

Модуль angular-bootstrap не включен, так что вы не получите правильный рендеринг. Но он показывает, как определить функцию в вашем контроллере для работы вашего шаблона.

function ctrl($scope) {
    // dummy users data for the snippet purpose
    $scope.users = [{
            name: 'Joe',
            id: '1', 
            data : 'Married to Jane',
        },
        {
            name: 'John',
            id: '2',
            data : 'Has 3 children',
        },
        {
            name: 'Jack',
            id: '3',
            data : 'Owns a boat',
        },
        {
            name: 'Bob',
            id: '4',
            data : 'Speaks swedish',
        }
    ];

    $scope.load_userdata = function(user_id) {
        console.log("Loading user#%s data", user_id);
        
        // looking for the right user : 
        let user = $scope.users.find(x => x.id === user_id);

        // and toggling the dataLoaded property in the user object
        user.dataLoaded = true;        
    }
}
<!DOCTYPE html>
<html ng-app>
   <head>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
      <meta charset=utf-8 />
      <title>Angular JS Demo</title>
   </head>
   <body ng-controller="ctrl">
      <uib-accordion close-others="oneAtATime">
         <div uib-accordion-group class="panel-default" ng-repeat="user in users">
            <uib-accordion-heading ng-click="load_userdata(user.id)">
               <div class="table">
                  <div style="width: 50%">
                     @{{user.name}}             
                  </div>
                  <div>
                     Load user data
                  </div>
               </div>
            </uib-accordion-heading>
            <div ng-show="user.dataLoaded">
               User's details : 
               {{user.data}}     
            </div>
          </div>
      </uib-accordion>

   </body>
</html>

Источник
Другие вопросы по тегам