当json数据被ng change修改时使用ng repeat

在JSON数据发生任何更改之前，通过ng repeat呈现的数据可以正常工作。这里有一个选择框，在更改选择框选项时，json数据会被修改。我需要使用新数据呈现html

<div class="col-sm-12" ng-controller="treeGridController">
    <div class="event-mob-tree-box" ng-repeat="data in tree_data">
        <div class="event-mob-tree-content">
            <div class="event-tree-log">
                <p>Items: <span class="event-tree-log-result">{{data.Items}}</span>
                </p>
            </div>
        </div>
        <div class="sub-event-mob">
            <select ng-model="selectItem" ng-options="c.DemographicId as c.Name for c in data.children track by c.DemographicId" ng-change="loadSubEvents(selectItem)">
                <option value="">--Choose Subevents--</option>
            </select>
        </div>
    </div>
</div>

newTree的控制台日志

{"DemographicId":2,"parent":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}]}]}

我不知道这样的事情是否有用

HTML


问候
 我很确定我找到了问题（）：

您正在使用控制器的两个实例：

angular.module('MainApp')
.controller('treeGridController', function ($scope, $timeout, $http) {
var tree;
var id = 1;
var rawTreeData = [];
var newTree = [];
var obj;
$scope.tree_data = [];
var Recurse = function (data, parentId) {
    angular.forEach(data, function (items) {
        id++;
        obj = {
            "DemographicId": id,
                "ParentId": parentId,
                "Name": items.Name,
                "Items": items.ItemsCount,
                "Failed": items.ItemsFailedCount,
                "Execution": (new Date(items.ExecutionEnd) - new Date(items.ExecutionStart)) / 1000,
                "Actions": items.Actions
        };
        rawTreeData.push(obj);
        if (angular.isObject(items.Suscribers) || angular.isObject(items.Events)) {
            Recurse(items.Suscribers || items.Events, id);
        }

    });
};

$http.get('http://dev.appgile.com/monitor/api/eventlog/geteventlog')
    .then(function (res) {
    $scope.datas = res.data;
    angular.forEach(res.data, function (items) {
        obj = {
            "DemographicId": id,
                "ParentId": null,
                "Name": items.Name,
                "Items": items.ItemsCount,
                "Failed": items.ItemsFailedCount,
                "Execution": (new Date(items.ExecutionEnd) - new Date(items.ExecutionStart)) / 1000,
                "Actions": items.Actions
        };
        rawTreeData.push(obj);
        if (angular.isObject(items.Suscribers) || angular.isObject(items.Events)) {
            Recurse(items.Suscribers || items.Events, id);
        }
        id++;
    });

    var myTreeData = getTree(rawTreeData, 'DemographicId', 'ParentId');

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


    /*-----------------------------------------------------------------------------------------------------------*/

    function processChildren(item, ret, parent) {
        for (var i = 0; i < item.length; i++) {
            var cur = item[i];
            var DemId = cur.DemographicId;
            ret.push({
                "DemographicId": DemId,
                    "parent": parent,
                    "ParentId": cur.parentId,
                    "Name": cur.Name,
                    "Items": cur.Items,
                    "Failed": cur.Failed,
                    "Execution": cur.Execution,
                    "Actions": cur.Actions,
                    "Children": cur.children
            });
            if ("children" in cur && cur.children.length > 0) {
                processChildren(cur.children, ret, DemId);
            }
        }
    }

    var processedTree = [];

    processChildren(myTreeData, processedTree, null);
    $scope.loadSubEvents = function (item) {
        for (var i = 0; i < processedTree.length; i++) {
            if (processedTree[i].DemographicId == item) {
                //console.log(processedTree[i]);
                $scope.newTree = processedTree[i];
                console.log($scope.newTree.Name);
                //return newTree
            }
        }
    }
});
});

ng-controller="treeGridController"

这将创建treeGridController的实例。您正在修改的newTree变量不在同一控制器中

我将ng控制器移动到了一个较高的分区（两个列表的全局分区），它几乎成功了

scope.newTree=processedTree[i]还提供了一个对象而不是数组。您可以这样做：
scope.newTree=[processedTree[i]]

我不确定全球事物应该如何运作，但你至少可以从现在开始走得更远

希望有帮助。
对于tree_数据和newTree，console.logs显示了什么？@Okazari:我不知道这是正确的方法还是应该使用指令？我很确定我们可以在没有任何自定义指令的情况下解决这个问题。你能说一件事吗？我真的不明白这两个HTML部分是相同的还是在不同的地方？@Okazari:这是同一HTML页面上的两个不同的div。@Okazari:这是plunk。这是一个很好的尝试，但不幸的是在我的情况下不起作用。哇，我太傻了。谢谢。@Amitz这种错误你自己很难发现。
{"DemographicId":2,"parent":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}]}]}

<div ng-app="myApp" ng-controller="MainCtrl as mainCtrl">
  <div>
    <select name='options' ng-change='mainCtrl.modificarArray();' ng-model="mainCtrl.value;">
  <option value='1'>Option 1</option>
  <option value='2'>Option 2</option>
  <option value='3'>Option 3</option>
</select>
  </div>
  <div>
    <div ng-repeat="item in mainCtrl.lista">{{item.nombre}}</div>
  </div>
</div>

var app = angular.module("myApp", []);

app.controller("MainCtrl", MainCtrl);

function MainCtrl(){
  var vm = this;
  vm.value = 1;
  vm.modificarArray = modificarArray;

  function modificarArray(){
    vm.lista[vm.value].nombre = "changed";
  }

  vm.lista = [
    {nombre:'nombre01', apellido:'apellido01'},
    {nombre:'nombre02', apellido:'apellido02'},
    {nombre:'nombre03', apellido:'apellido03'},
    {nombre:'nombre04', apellido:'apellido04'},
    {nombre:'nombre05', apellido:'apellido05'}
  ];
}

ng-controller="treeGridController"