AngularJS：如何通过单击所述按钮来更改 ng-repeat 中的按钮和其他元素？答案

【问题标题】：AngularJS: How do you change a button and other elements within an ng-repeat with a click of said button?AngularJS：如何通过单击所述按钮来更改 ng-repeat 中的按钮和其他元素？
【发布时间】：2022-01-21 14:42:55
【问题描述】：

假设我有一些代码：

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="hey">
      <div class="dude" ng-repeat="thing in things">
          <button type="button" ng-click="doStuff()">click me</button>
          <div ng-repeat="p in {{thing.parts}}">Part {{$index}}: {{p}}</div>
      </div>
  </div>
</div>

现在，假设我想让“things”数组中的每个“thing”都有自己对应的按钮。当我单击与一个特定“事物”相对应的按钮时，将显示“部件”数组中的条目（“事物”的属性），并且文本“单击我”将更改为“被单击”。当您再次单击该按钮时，将不会显示该“事物”的部件数组条目，并且该按钮的文本将返回为“单击我”。

我该怎么做呢？我不太确定如何准确地操作 ng-repeat 中的各个元素。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您可以通过 id 或 index 进行跟踪。

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.things = [{
        id: 1,
        title: "Thing Foo",
        parts: ["a", "b", "c"]
      },
      {
        id: 2,
        title: "Thing Bar",
        parts: ["d", "e", "f"]
      }
    ];

    $scope.doStuff = function(id, index) {
    let thing
    if (id)  thing = $scope.things.find(t => t.id === id)
    else  thing = $scope.things[+index]
      console.log(`${thing.title} clicked`);
      thing.show = !thing.show;
      if (!thing.show) return;
      let c = thing.numClicks ? +thing.numClicks + 1 : 1;
      thing.numClicks = c;
    }
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="hey">
    <div class="dude" ng-repeat="thing in things">
      <button type="button" ng-click="doStuff(thing.id)">click me (id)</button>
      <button type="button" ng-click="doStuff(false, $index)">click me (index)</button>
      <div ng-show="thing.show">
        <h3>Clicked {{thing.numClicks}} times</h3>
        <div ng-repeat="p in thing.parts">Part {{$index}}: {{p}}</div>
      </div>
      <hr>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

如果“事物”处于活动状态，您需要在某个地方进行存储。您可以在 thing 上添加 isActive 属性，也可以在 VM 上添加 activeThing 属性。

对于这个例子，把它放在你的虚拟机上。

然后在你的外部ng-repeat 中放置一个div 和一个ng-if，如下所示：

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="hey">
      <div class="dude" ng-repeat="thing in things">
          <div ng-if="thing !== activeThing">
            <button type="button" ng-click="activeThing = thing">click me</button>
          </div>
          <div ng-if="thing === activeThing">
            <button type="button" ng-click="activeThing = undefined">Clicked</button>
            <div ng-repeat="p in {{thing.parts}}">Part {{$index}}: {{p}}</div>
          </div>
          
      </div>
  </div>
</div>

【讨论】：