Блог

 $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 }
        ]
    }
];
  

Если у меня есть вышеупомянутый объект, и родительские элементы должны отображаться в divs с использованием ng-repeat. Как я могу затем щелкнуть по каждому родительскому элементу, чтобы затем заменить родителей дочерними записями выбранного div?

Почти хочу изменить 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>
  

Спасибо,

ng-click="webAppsDepartment = {{a.Apps}}" не будет работать. Вместо этого вы хотели бы сохранить ссылку на дочерние элементы при нажатии на нее. Смотрите обновленную ng-click Мы используем функцию и передаем любой выбранный элемент, а затем отображаем дочерние элементы

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>
  

Ваш контроллер:

 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;
    }
  }
});