在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>
这是带有修改过的JSON数据的html，这不是
<div class="col-sm-12" ng-controller="treeGridController">
<div class="event-mob-tree-box" ng-repeat="tree in newTree">
<div class="event-mob-tree-content">
<div class="event-tree-log">
<p>Items: <span class="event-tree-log-result">{{tree.Items}}</span>
</p>
</div>
</div>
<div class="sub-event-mob">
<select ng-model="selectItem" ng-options="c.DemographicId as c.Name for c in tree.children track by c.DemographicId" ng-change="loadSubEvents(selectItem)">
<option value="">--Choose Subevents--</option>
</select>
</div>
</div>
</div>
控制器：
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
}
}
}
});
});
tree_data
{"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}]}]}]}
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}]}]}
答案 0 :(得分：1)
我不知道这样的事情是否会有所帮助
HTML
<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>
JS：
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'}
];
}
此致!!
答案 1 :(得分：1)
很确定我发现了问题（working plunker）：
您正在使用控制器的两个实例：
ng-controller="treeGridController"
这将创建treeGridController的一个实例。您正在修改的newTree var不在同一个控制器中。
我将ng-controller移动到上部div（两个列表的全局），它几乎起作用。
scope.newTree = processedTree[i];也提供了一个对象而不是一个数组。你可以这样做：scope.newTree = [processedTree[i]];
我不确定全球事物应该如何表现，但你至少可以从现在开始更进一步
希望它有所帮助。