AngularJS单击链接时显示文本区域

我有一系列链接：

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

//单击上面的链接后，在此处插入文本框

您可以利用这样一个事实，即

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>

//单击上面的链接后，在此处插入文本框

尝试组合

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>

链接的含义是什么。$open我知道链接是从链接中迭代的当前项，但是

$open

呢？@DavidDury任意属性名，您可以随意调用它（像变量一样）。作为惯例，我使用

$

作为前缀，因为在使用$http发送数据时，角带都以$http作为前缀