AngularJS: How do you change a button and other elements within an ng-repeat with a click of said button?

Question

Let's say that I have some code:

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

Now, let's say that I want to make it so that each "thing" in the "things" array has its own corresponding button. When I click on the button that corresponds to one particular "thing", the entries in the "parts" array (a property of a "thing") will be displayed and the text "click me" will change to "been clicked". When you click the button again, the entries of the parts array for that "thing" will not be displayed, and the text for the button will go back to saying "click me".

How exactly would I do this? I'm not quite sure how exactly to manipulate individual elements within an ng-repeat.

Answer 1

You need somewhere to store if a "thing" is active or not. You could either add an isActive property on thing or add an activeThing property on your VM.

For this example, put it on your VM.

Then put a div with an ng-if inside your outer ng-repeat , like so:

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

Answer 2

You can track by id or track by 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>