Javascript Angularjs在ng repeat中显示和隐藏按钮

我有一个使用

ng repeat

填充屏幕的列表。 每一行都有一个按钮供用户单击以选择该行。 通常，您可以使用单选按钮，但用户需要按钮切换

我真正想要的是显示第一个按钮（第一次显示列表时隐藏第二个按钮），在用户单击第一个按钮以选择特定行后，我想要隐藏第一个按钮并显示第二个按钮。 2按钮具有不同的ID、文本和样式。 因此，对于用户来说，这就像在选择后更改按钮的外观一样

我尝试在控制器的函数

populatefare选项（row.col3.value，row.col4.value）

中设置

showfarebut1

/

showfarebut2

范围变量，但所有行在单击按钮一后都有第二个按钮

任何想法或代码片段。。将不胜感激

HTML

---

将

showfarebut2

附加到

行列表中的对象上：

$scope.populateFareOption = function(row){
  cardForm.fareOption.value = row.col3.value;
  cardForm.productCode.value = row.col4.value;
  row.showFareBut2 = true;
}

以及您的HTML：

<button id="btnXX2" ng-show="row.showfarebut2" type="button" class="btn pull-right">

在您的示例中，所有行都共享了
showfarebut1
和
showfarebut2
，这会导致单击一个按钮会影响所有行。您应该使用绑定到当前行的内容：
row.showfarebut1
和
row.showfarebut2

但是，有一种更有效的方法来制作切换按钮。您可以重用相同的按钮，并根据记录的状态设置类和文本。下面是一个简单的例子：

HTML

<ul class="list-group" ng-controller="ctrl">
  <li class="list-group-item" ng-repeat="row in rowList">
    <span>{{row.col1.value}}</span>
    <span>{{row.col2.value}}</span>
    <button type="button" ng-click="row.selected=!row.selected" class="pull-right btn btn-xs">
      <span ng-class="{'glyphicon':true, 'glyphicon-ok':row.selected, 'glyphicon-plus':!row.selected}"></span>
      {{row.selected?'Selected':''}}
    </button>
  </li>
</ul>

<table ng-controller="ctrl" class="table">
  <tr ng-repeat="row in rowList">
    <td>{{row.col1.value}}</td>
    <td>
      <span class="price">PRICE:&nbsp;
        <strong class="amount">{{row.col2.value}}</strong>
      </span>
      <button id="btn{{$index}}"  type="button" class="btn pull-right" ng-click="select(row)">
        <span class="text pull-left" name="fareOption" value="{{row.col3.value}}">{{row.selected?'Selected':'Select'}}</span>
        <i ng-class="{'icon-placeholder':!row.selected, 'selected-icon':row.selected, 'pull-right':row.selected}"></i>
      </button>
    </td> 
  </tr>
</table>

您甚至不需要一些特殊的功能来选择一个项目，您可以直接在

屏幕截图

angular.module('app', []).
  controller('ctrl', function($scope) {
    $scope.rowList = [{
      col1: { value: 'r1c1'},
      col2: {value: 'r1c2'}
    }, {
      col1: {value: 'r2c1'},
      col2: {value: 'r2c2'}
    }, {
      col1: {value: 'r3c1'},
      col2: {value: 'r3c2'}
    }];
  });

angular.module('app', []).
  controller('ctrl', function($scope) {
    $scope.rowList = [{
      col1: {value: 'Orange'},
      col2: {value: '10'},
      col3: {value: 'x1'},
      col4: {value: 'y1'}
    }, {
      col1: {value: 'Apple'},
      col2: {value: '20'},
      col3: {value: 'x2'},
      col4: {value: 'y2'}
    }, {
      col1: {value: 'Banana'},
      col2: {value: '15'},
      col3: {value: 'x3'},
      col4: {value: 'y3'}
    }];

    $scope.select = function(row) {
      row.selected=!row.selected;
      // Do something with row.col3.value and row.col4.value
    }
  });


Plunker:


编辑（改编版）：

HTML

<ul class="list-group" ng-controller="ctrl">
  <li class="list-group-item" ng-repeat="row in rowList">
    <span>{{row.col1.value}}</span>
    <span>{{row.col2.value}}</span>
    <button type="button" ng-click="row.selected=!row.selected" class="pull-right btn btn-xs">
      <span ng-class="{'glyphicon':true, 'glyphicon-ok':row.selected, 'glyphicon-plus':!row.selected}"></span>
      {{row.selected?'Selected':''}}
    </button>
  </li>
</ul>

<table ng-controller="ctrl" class="table">
  <tr ng-repeat="row in rowList">
    <td>{{row.col1.value}}</td>
    <td>
      <span class="price">PRICE:&nbsp;
        <strong class="amount">{{row.col2.value}}</strong>
      </span>
      <button id="btn{{$index}}"  type="button" class="btn pull-right" ng-click="select(row)">
        <span class="text pull-left" name="fareOption" value="{{row.col3.value}}">{{row.selected?'Selected':'Select'}}</span>
        <i ng-class="{'icon-placeholder':!row.selected, 'selected-icon':row.selected, 'pull-right':row.selected}"></i>
      </button>
    </td> 
  </tr>
</table>

Plunker:
您不应该有两个ID相同的元素-这就是类的用途。您可以在创建
showfarebut1
和
showfarebut2
的位置共享控制器吗？如果您想要粒度，您可能需要在正在迭代的
行中添加几个
可见的
属性。谢谢jraede和Davin。。。我已经更新了代码片段。按钮现在有不同的id。@olatom您不应该对
ng repeat
中的元素使用static
id
属性。考虑使用动态<代码> ID>代码> s，如<代码> ID=“BTN{{$index }”< /代码>或根本不使用它们。否则，每一行都会有带有
id=“btnXX1”
和
id=“btnXX2”
的按钮，因此会产生重复的id，这会生成错误的HTML并滥用
id
属性用法。瓦迪姆，我喜欢你的代码，感谢你的时间和专业知识。但是，我使用的是来自网页设计团队的现成样式，我必须根据样式进行编码。如果我能让你的代码按预期工作就好了。我也在尝试下面的另一个答案。对这两种方法都感兴趣，因为它们在现在和将来的开发中都会很有用。我是否遗漏了您的内容。@olatom我添加了一个改编版本，该版本使用了原始答案中的标记和概念。Vadim！你救了我好几天头撞在墙上。我能够在几分钟内采用use代码，并且它是半工作的，但我希望能够从列表中仅选择一个按钮，即像单选按钮一样。拜托，你会怎么做。在生产任务单上，您可以选择多个。我希望我们不必丢弃代码，因为它太好了，不能丢弃！我试过你的逻辑，但我能让它发挥作用。每行的ng show应该有一个计算结果为true或false的表达式。当第一次加载页面时，希望显示第一个按钮，因此第一个和第二个按钮的true ng show值默认为false。我的问题是当点击按钮时，上面的“row.showFareBut2=true”不是范围对象，它将如何填充第二个按钮的ng show。此外，我如何改变第一次的ng秀。我一定错过了什么。