2016-05-12 3 views
0

Мне нужно показать прог-бар на элементе, нажатом. это мой .jsp:AngularJs ng-show по определенному элементу

list.jsp

<div class="mb-pane" ng-style="{height: panelsHeight}"> 
<file-system-meeting refresh="global.refreshMeetings"></file-system-meeting> 

contentList.jsp:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 

<!-- the "more" button and "actions buttons". This should be refactored 
<div class="pull-right"></div>--> 

<!-- the core meeting display stuff. Really really simple. We should take care of the forced "size". --> 
<div class="media"> 
    <div class="media-left"> 
    <!-- ng-click='progressRun()' --> 
     <a href="#meetings/{{meeting.id}}" ng-click="progressRun($event)" > 
      <!-- <img ng-if="meeting.iconId" class="mb-repo-icon" ng-src="<c:url value="/restful/meetings/" />{{meeting.id}}/icons/{{meeting.iconId}}/thumbnail" /> --> 
      <img ng-if="!meeting.iconId" class="mb-repo-icon" src="<c:url value="/img/thumbnail.png" />" /> 
     </a> 
    </div> 
    <div class="media-body"> 
     <h3>{{ meeting.titolo }}</h3> 
     <h4>Sub Title</h4> 
     <h6>Creato Da: {{meeting.autore}}</h6> 
     <div id="prog" class="progress" ng-show="runp"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> 
       60% 
      </div> 
     </div> 
    </div> 
    <div class="media-right"> 
     <h5>Part: {{meeting.num_partecipanti}}</h5> 
     <h5>Doc: {{meeting.num_doc}}</h5> 
     <h5>Durata: {{meeting.durata}} min</h5> 
    </div> 
</div> 

Как можно показать индикатор выполнения на щелканном элементе?

Спасибо.

+0

Вы можете посмотреть на [ngProgress] (http://victorbjelkholm.github.io/ngProgress/) посмотреть, если вы можете использовать возможно, или посмотрите, как работает их код. – rrd

ответ

0

Вы можете использовать функцию для установки области.

так в вашем контроллере вы бы что-то вроде этого:

$scope.functionName = function() { 
    $scope.trueValue = true; 
} 

Затем вы можете использовать нг-шоу на элемент, который вы хотите показать, как что-то вроде этого нг-шоу = «trueValue»

вы также должны определить scope.trueValue быть ложным из этой функции .. Кроме того, если вы хотите, чтобы переключить истинное значение, которое вы просто должны сделать это в функции:

$scope.functionName = function() { 
    $scope.trueValue = !$scope.trueValue; 
} 
+0

Этот код позволяет мне показывать prog bar, но для каждого элемента списка мне нужно показать prog только на элементе с одним щелчком. – KPN24

0

Пусть выполнено THI s Ваш клик элемент

<a href="#meetings/{{meeting.id}}" ng-click="progressRun($event)" > 
       <!-- <img ng-if="meeting.iconId" class="mb-repo-icon" ng-src="<c:url value="/restful/meetings/" />{{meeting.id}}/icons/{{meeting.iconId}}/thumbnail" /> --> 
       <img ng-if="!meeting.iconId" class="mb-repo-icon" src="<c:url value="/img/thumbnail.png" />" /> 
      </a> 

// Контроллер JS

$scope.runp = false; 

$scope.progressRun = function ($event) { 
    $scope.runp = true; 

} 
+0

Я сделал это, но в каждом элементе списка отображается прогрессивный бар, мне нужно показать progressiv только на щелкнутом элементе. – KPN24

+0

", но в каждом элементе списка отображается прогрессивная индикация" Не имеет смысла. Что вы подразумеваете под этим предложением. Может быть, вы пропустили какой-то важный кусок кода, чтобы поделиться с нами. –

+0

Его простой ... нажмите на элемент списка -> индикатор прогресса отображается на каждом элементе, но я хочу, чтобы он отображался только на клике. Нотин больше. – KPN24

Смежные вопросы