Question

朋友们，我有一个从JSON动态创建的树。它还为树上的特定元素创建了我想要的网格，并将它们全部隐藏起来。然后我有一个显示它的ng-click。我的问题是它显示了所有这些而不是我想要的那个。例如，如果用户点击了“记录1”中的标题。它应该显示第一个网格，依此类推。 Here is my JSBin

我的HTML看起来像这样。请参阅我的JSBin for JavaScript文件：

 <body ng-controller="AbnTestController" style="margin:20px">
               <button ng-click="try_changing_the_tree_data()" class="btn btn-default btn-sm">Submit File</button>      
           <p>
            <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
               <tr>
                  <!-- ============ LEFT COLUMN (TREE) ============== -->
                  <td width="250px" style="vertical-align:top" bgcolor="whitesmoke">
                     <div style="width:250px;background:whitesmoke;border:1px solid lightgray;border-radius:5px;">
                        <abn-tree ng-click="visible.grid = true" tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2"></abn-tree>
                     </div>
                  </td>
                  <!-- ============ RIGHT COLUMN (CONTENT) ============== -->
                  <td width="80%" valign="top" bgcolor="#d2d8c7">

                    <div style="vertical-align:top;">
                        <div ng-repeat="rule in rules">
                           <div ng-show="visible.grid == true"  class="gridStyle" ng-grid="rule.grid" ></div>

                        </div>

                        <div id="results"></div>
                     </div>
                  </td>
               </tr>
            </table>
            </p>
   </body>

Answer 1

这里是jsbin

HTML（差异）：

<div ng-repeat="rule in rules">
  <div 
    ng-show="rulesMap[rule.uid] == 'isVisible'" 
    class="gridStyle" 
    ng-grid="rule.grid"></div>
</div>

JavaScript删除对createGrids的调用，并且：

$scope.my_tree_handler = function(branch) {
  createGridsFromBranch(branch);
};

/*Function that builds the grid*/
$scope.rulesMap = {};
$scope.rules = [];
createGridsFromBranch = function(branch) {
  var gridUid = 'g_'+branch.uid;
  for(var i in $scope.rulesMap) {
    $scope.rulesMap[i] = 'notVisible';
  }
  if($scope.rulesMap[gridUid]) {
    $scope.rulesMap[gridUid] = 'isVisible';
    return;
  }
  $scope.rulesMap[gridUid] = 'isVisible';
  $scope.rules.push({
    uid: gridUid,
    grid: {
      ...
    }
  });

Angular JS在ng-repeat中显示特定的ng-grid

1 个答案: