Question

我有一系列链接：

$scope.links = [{
   URL: ''    
}];

然后我使用data-ng-repeat在视图中显示这些链接。

如何在用户点击其下方的任何链接时显示文本框？如果再次单击，文本框将消失？

所以如果html是：

<div data-ng-repeat="link in links">
   <p>
        <a data-ng-href="{{link.URL}}">{{link.URl}}</a>
   <p>
    // when link above is clicked, insert here textbox
</div>

Answer 1

尝试结合使用ngClick和ngIf：

<div data-ng-repeat="link in links">
   <p>
      <a data-ng-href="{{link.URL}}"
         data-ng-click="link.$open = !link.$open">{{link.URl}}</a>
      <input type="text" data-ng-if="link.$open" />
   <p>
</div>

Answer 2

您可以利用ng-repeat为每个项目创建范围的事实。使用临时变量showHelpText，这就是你如何实现它：

<div data-ng-repeat="link in links">
   <p>
        <a data-ng-href="{{link.URL}}" data-ng-click="showHelpText=!showHelpText">{{link.URl}}</a>
   <p>
    // when link above is clicked, insert here textbox
   <input type="text" data-ng-show="showHelpText">
</div>

AngularJS在链接点击时显示textarea

2 个答案: