顯示基於條件

Question

/隱藏

我當前的標記看起來像這樣：

<div class="box" ng-click="showMe($event)"> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
    <p>5</p> 
    <p>6</p> 
    <p>7</p> 
</div> 

，並在我的控制器：

$scope.showMe = function(event) { 
    $(event.target).find('p').toggle(); 
}; 

有沒有一種方法，首先擺脫了jQuery的依賴，因爲我」 m使用Angular，其次 - 我怎樣才能做到這一點，所以我只顯示一組特定的行 - 所以我有一個條件，例如只能顯示5個p標籤？

Answer 1

這是你的看法標記

<div class="box" ng-click="showMe()"> 
    <div ng-show="isVisible"> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
    <p>5</p> 
    <p>6</p> 
    <p>7</p> 
    </div> 

</div> 

這是你的控制器功能

$scope.showMe=function(){ 
    $scope.isVisible=!$scope.isVisible; 
} 

Answer 2

上邊界div來切換可見使用ng-show。要更改p標籤的數量，請使用ng-repeat指令來控制從控制器顯示的標籤數量。

<div class="box" ng-click="showMe()"> 
    <div ng-show="isVisible"> 
    <p ng-repeat="n in tags"> 
     {{n}} 
    </p> 
    </div> 
</div> 

在控制器上，創建動態標籤，並添加知名度反覆單擊處理程序：

var numTags = 5; 
var i = 0; 
$scope.tags = []; 

while (i < numTags){ 
    $scope.tags.push(i+1); 
    i++; 
} 

$scope.showMe=function(){ 
    $scope.isVisible=!$scope.isVisible; 
}