Javascript 在ng重复列表中显示和隐藏按钮

我的ng重复列表中的每一项都有一个按钮。默认情况下按钮是隐藏的，我希望在用户选择列表项时显示按钮，并在用户选择其他列表项时隐藏按钮。我无法让它工作，当用户选择列表项时，按钮保持隐藏

下面是我到目前为止尝试过的相关代码

HTML：

名称：{{thing.Name}

删除

JS代码：

$scope.selectthing=函数（idx）{
$（this.find（'ul.btn'）.show（）；//这不起作用
.
.
.
//用选定的东西做一些很棒的事情。
}

我的问题是：当用户选择列表项时，如何让按钮显示，当用户选择其他列表项时，如何隐藏按钮

你已经差不多做到了：

<ul ng-repeat="thing in things">
  <li>
    <p ng-click="$parent.selectedIndex = $index">Name: {{thing.name}}</p>

    <button class="btn btn-block" 
            ng-show="$parent.selectedIndex == $index">Delete</button>
  </li>
</ul>

名称：{{thing.Name}
删除

---

请参见

您正在混合Angular和jQuery，这是通往地狱的滑梯：）（好的，警告：指令，但情况不同）。如果您发现自己即将在控制器中编写jQuery，那么应该敲响警钟：您正在打破MVC分离，缺少更简单的东西

这里的诀窍是使ng show有条件于当前渲染的项目是否为选定项目。要检测到这一点，请在所选索引的范围内做一个注释。就像这样

HTML视图：

<ul ng-repeat="thing in things" role="presentation" id="thing-details" ng-click="selectthing($index)" >
    <li>
        <p>Name: {{thing.name}} </p>

        <button class="btn btn-block" ng-show="$index===selectedIndex" id="thing-delete" >Delete</button>
    </li>
</ul>

---

我相信你有问题，因为你混合了ng show和show/hidden属性。ng show将始终为false，因此始终隐藏元素。好的，您对如何实现此功能有何建议？我的建议是取消ng show，将其设置为style='display:none'，然后使用.show（）和.hide（）。如回答中所述，ng show应该引用控制器模型上的某些内容。然后点击ng应该会改变模型。漂亮而简洁。啊!！是，$parent是关键的，否则它将在单个重复作用域上设置selectedIndex。（除非您使用作用域方法，而不是直接从视图中执行该操作）。当我调用onclick函数时，如何隐藏删除按钮。@User123根据答案中的代码片段，您可以定义属性eg

\u deleted

on

thing

并在

中单击
函数将其设置为
true
。@doe严格来说，你是对的，它没有被初始化（为了清楚起见，我已经将init编辑为-1），但它仍然工作，因为它永远不会匹配
$index===未定义的行。这就是你的意思吗？
$scope.selectedIndex = -1;
$scope.selectthing = function(idx) {

    $scope.selectedIndex = idx;

    .
    .
    .
    // do some awesome stuff with the selected thing.
}