AngularJS显示以前的点击数据

Question

这是当前情况的PLUNK。

我有一个HTML格式的div，其中使用ng-repeat通过JSON填充数据。 JSON数据采用嵌套形式。在div中有一个锚标记，单击该标记会将JSON中父节点的子节点呈现为HTML。

点击此处的"2 sub events"，即可填充子事件的数据。

哪个工作正常。现在页面顶部有一个按钮，我需要在点击该按钮时显示父母的数据。我不知道该怎么做。请帮忙。

app.js

angular.module('MainApp',[])
.controller('treeGridController', function ($scope, $timeout, $http) {

$scope.tree_data = [];

var myTreeData = [{"DemographicId":1,"ParentId":null,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":2,"ParentId":1,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null,"children":[{"DemographicId":3,"ParentId":2,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":4,"ParentId":3,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":5,"ParentId":3,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]},{"DemographicId":6,"ParentId":2,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":7,"ParentId":6,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":8,"ParentId":6,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]}]},{"DemographicId":9,"ParentId":1,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null,"children":[{"DemographicId":10,"ParentId":9,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":11,"ParentId":10,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":12,"ParentId":10,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]},{"DemographicId":13,"ParentId":9,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":14,"ParentId":13,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":15,"ParentId":13,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]}]}]},{"DemographicId":16,"ParentId":null,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":17,"ParentId":16,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null,"children":[{"DemographicId":18,"ParentId":17,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":19,"ParentId":18,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":20,"ParentId":18,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]},{"DemographicId":21,"ParentId":17,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":22,"ParentId":21,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":23,"ParentId":21,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]}]},{"DemographicId":24,"ParentId":16,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null,"children":[{"DemographicId":25,"ParentId":24,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":26,"ParentId":25,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":27,"ParentId":25,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]},{"DemographicId":28,"ParentId":24,"Name":"Subscriber","Items":5,"Failed":6,"Execution":0,"Actions":[{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"},{"Name":"Start","Text":"Abc","IconFileName":"file","ToolTip":"xyz","IsVisible":false,"IsEnabled":true,"IsForbidden":false,"ActionUrl":null,"CommandName":"ijk"}],"children":[{"DemographicId":29,"ParentId":28,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null},{"DemographicId":30,"ParentId":28,"Name":"Suscriber 1","Items":20,"Failed":10,"Execution":0,"Actions":null}]}]}]}];

$scope.tree_data = myTreeData;
console.log(JSON.stringify(myTreeData));

$scope.loadSubEvents=function(item){
        $scope.tree_data = item;
        console.log(JSON.stringify($scope.tree_data));
    }
});

HTML：

  <div>
    <h2><span><a href="#/">Go Back</a></span> Event Log</h2>
  </div>
  <div class="col-sm-12">
    <div ng-repeat="data in tree_data" >
        <div>
            <h2>{{data.Name}}</h2>
        </div>
        <div>
            <div>
                <p>Items: <span>{{data.Items}}</span></p>
            </div>
            <div>
                <p>Failed: <span>{{data.Failed}}</span></p>
            </div>
            <div>
                <p>Execution: <span class="event-tree-log-result">{{data.Execution}}</span></p>
            </div>
        </div>
        <div>
            <h3 ng-if="data.children.length">
               <a href="" ng-click="loadSubEvents(data.children)">{{data.children.length}} sub events</a>
            </h3>
        </div>
    </div>
  </div>

Answer 1

好吧，你应该加载父数据。一种方法是在加载子元素时保存父级，当您单击“返回”时，只需重新加载子级的父级即可。因此，您基本上需要设置父项，然后添加一个新函数来加载子项的父项。

if(isset($_POST['submit']))
{   

$brevet = $_POST['Brevet'];

$baccalaureatbt = $_POST['Baccalaureatbt'];


 $sql1="SELECT Brevet,Baccalaureatbt FROM university";

$result=mysqli_query($con,$sql1);
if ($result)
  {

  $rowcount=mysqli_num_rows($result);
  }
    if($rowcount==0)
     {
 $sql="INSERT INTO university(Brevet,Baccalaureatbt) VALUES('$brevet','$baccalaureatbt')";
 $result = mysql_query($sql);
     }
     else
     {
         $values = array("brevet","baccalaureatbt");
         $sql2 = "UPDATE university ";
         $n = 0;
         foreach($_POST as $key => $val) {
             if(in_array($key, $values)) {
                 $sql2 += ($n !== 0 ? ", " : 0);
                 $sql2 += "SET".$key." = ".$val;
                 $n++;
             }
             if($n > 0) {
                $result2 = mysql_query($sql2);
             } 
     }
    }
}

然后您可以使用点击处理程序更新HTML

$scope.loadSubEvents=function(item){
    // set parent
    item.parent = $scope.tree_data;
    $scope.tree_data = item;
    console.log(JSON.stringify($scope.tree_data));
}

$scope.loadParent = function() {
    if (!$scope.tree_data.parent)
        return;
    // load the parent
    $scope.tree_data = $scope.tree_data.parent;
    console.log(JSON.stringify($scope.tree_data));
}