AngularJS - Ng-repeat Clickable divs to reveal child records

Question

$scope.webAppsDepartment = [

    { AppName: 'Unlock Case', Colour: '#AF1A3F', Apps: null },

    { AppName: 'Route Rec', Colour: '#00ABA9', Apps: null },

    { AppName: 'RW Database', Colour: '#AF1A3F', Apps: null },

    { AppName: 'Standing Order', Colour: '#00ABA9', Apps: null },

    { AppName: 'EA Department', Colour: '#000000', Apps: [

            { AppName: 'EA Payments', Colour: '#F1BA21', Apps: null },

            { AppName: 'Print Route', Colour: '#00ABA9', Apps: null }

        ]

    }

];

If I have the above object and the parent items are bound to be displayed in divs using ng-repeat. How can I then click on each parent item to then replace the parents with the children records of the clicked div?

Almost want to change the ng-repeat.

<div class="col-md-4" ng-repeat="a in webAppsDepartment | filter:filteredApp">

  <div class="link-box" ng-style="{'background-color': a.Colour}">

    <span ng-click="webAppsDepartment = {{a.Apps}}" title="{{a.AppName}}" data-toggle="tooltip" data-placement="bottom">

      <img src="~/Content/Images/base-jumping-64.png" />

    </span>

  </div>

</div>

Thanks,

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

ng-click="webAppsDepartment = {{a.Apps}}" is not going to work. What you'd want to do is instead save a reference to the children when clicking it. See the updated ng-click We use a function and pass whichever selected item and then display the children

https://jsfiddle.net/vadaqjjv/1/

<div class="col-md-4" ng-repeat="a in webAppsDepartment | filter:filteredApp">
  <div class="link-box" ng-style="{'background-color': a.Colour}">
    <span ng-click="selectDept(a.Apps)" title="{{a.AppName}}" data-toggle="tooltip" data-placement="bottom">
      <img src="~/Content/Images/base-jumping-64.png" />
    </span>
  </div>
</div>
<div ng-if="selectedDepartment">
  <span>Selected department</span>
  <div ng-repeat="dept in selectedDepartment">
    {{dept.AppName}}
  </div>
</div>

Your controller:

app.controller('TestCtrl', function($scope) {
  $scope.webAppsDepartment = [
      { AppName: 'Unlock Case', Colour: '#AF1A3F', Apps: null },
      { AppName: 'Route Rec', Colour: '#00ABA9', Apps: null },
      { AppName: 'RW Database', Colour: '#AF1A3F', Apps: null },
      { AppName: 'Standing Order', Colour: '#00ABA9', Apps: null },
      { AppName: 'EA Department', Colour: '#000000', Apps: [
              { AppName: 'EA Payments', Colour: '#F1BA21', Apps: null },
              { AppName: 'Print Route', Colour: '#00ABA9', Apps: null }
          ]
      }
  ];
  $scope.selectedDepartment = null;
  $scope.selectDept = function(dept) {
    if (dept != null) {
      // do something here to show your children
      $scope.selectedDepartment = dept;
    } else {
      $scope.selectedDepartment = null;
    }
  }
});

AngularJS - Ng-repeat Clickable divs to reveal child records

Sign up