Question

在尝试学习angularjs的过程中，我使用div创建了一组ng-repeat s。我总共有五个div个。我只使用div指令组件显示第一个$first。

<div class="container" ng-app="demoApp" ng-controller="demoController">
  <div class="row" ng-repeat="job in jobs" ng-hide="!$first">
    <div class="col-md-4">
      {{job}}
    </div>
    <div class="col-md-4">
      <button class="btn-primary btn-xs add" ng-click="showNext($event)" ng-hide="$last">Add</button>
      <button class="btn-primary btn-xs delete" style="display: none;">Delete</button>
    </div>
  </div>
</div>

有效。

现在，每个div都有两个按钮，Add和Delete。当我单击添加时，我想要隐藏当前行的添加按钮和删除按钮，然后打开下一行。所以我写道，

$scope.showNext = function(evt) {
  var elm = evt.target;
  $(elm).hide();
  $(elm).next().hide();
  $(elm).closest("div.row").next().slideDown();
};

这不起作用，因为ng-hide覆盖了我的slideDown。做角度的方式是什么？

此外，我希望仅在$last 可见行＆amp;＆amp; !first。如何在ng-repeat中找到最后一个可见行？

小提琴：https://jsfiddle.net/codeandcloud/u4penpxw/

Answer 1

您不应该使用$(elm).hide();之类的东西来操纵DOM，您应该使用ng-class=让Angular添加隐藏或显示元素的类。如果您将ng-repeat切换为ng-repeat="job in jobs track by $index"，则可以在showNext() - 函数中写出类似内容：

 $scope.showNext = function(index) {
      $scope.currentJob = $scope.jobs[index]
 }

并将其称为ng-click="showNext($index) - 当然您也需要进行一些重构。但是你可以写一些像ng-class="{hidden: (job == currentJob}"这样的东西来隐藏当前行以外的所有按钮。

在这个q＆amp; a中有很多好的想法："Thinking in AngularJS" if I have a jQuery background?

在ng-click上覆盖ng-hide

1 个答案: