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

如果我有上述对象，则必须使用ng-repeat在div中显示父项。然后，我如何单击每个父项，然后将父项替换为单击的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>

谢谢，

Answer 1

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

AngularJS - Ng-repeat可点击div以显示子记录

1 个答案: