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依赖，因为我使用Angular，其次 - 我怎么能这样做所以我只显示一组特定的行 - 所以我有一个条件可以显示例如只有5个标签？

Answer 1

在边界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;
}

Answer 2

这是您的视图标记

str_replace()

这是你的控制器功能

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

根据条件显示/隐藏

2 个答案: