Question

我必须在点击的元素上显示前卫栏。这是我的.jsp：

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

如何在点击的元素上显示进度条？

感谢。

Answer 1

您可以使用功能设置范围。

所以在你的控制器里你会有这样的东西：

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

然后在要显示的元素上使用ng-show，就像这样的ng-show =“trueValue”

您还必须将scope.trueValue定义为此函数的假。如果您想要切换真值，您只需在函数中执行此操作：

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

Answer 2

假设这是您的点击元素

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

// Controller JS

$scope.runp = false;

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

}

AngularJs ng-show on specific element

2 个答案: