AngularJS Редактировать данные JSON с помощью форм

В AngularJS я пытаюсь создать и редактировать TreeView из данных JSON. Я хочу получить значение узла из JSON и отредактировать его с помощью форм. При редактировании исходный JSON должен немедленно измениться. Я создал ниже plunkr для этого, но не понял, как этого добиться.

Plunkr

var app = angular.module('plunker', []);

app.directive('collection', function () {       
    return {
        restrict: "E",
        //replace: true,
        scope: {collection: '='},
        //controller: 'TreeController',
        //bindToController: true,       
        template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"         
    }
})

app.directive('member', function ($compile) {
    var linkerfunc = function(scope, element, attrs) {  
                    var collectionSt = '<collection collection="member.children"></collection>';
                    $compile(collectionSt)(scope, function(cloned, scope)   {                                           
                        element.append(cloned); 
                     });
                     scope.ShowDetailsFunc = function() {   
                       console.log('in function scope showdetails')
                        scope.ShowDetailsCtrlFunc(element,event);                     
                    } 
    }
    return {
        restrict: "E",
        //replace: true,
        scope: {member: '=', ShowDetailsCtrlFunc : '&'},
        template: "<li><span ng-click=ShowDetailsCtrlFunc($event)>{{member.NodeName}}</span></li>",     
        controller: 'MainCtrl',
        //controllerAs: 'MainCtrl',
        //bindToController: true,
        link: linkerfunc        
    }
})

app.controller('MainCtrl', function ($scope,$timeout) {     

    $scope.Intialfunc = function() { 
        $scope.testdata = []
        var myjsondata = JSON.parse('{ "NodeName": "Parent", "NodePath": "1", "children": [ { "NodeName": "mychild", "NodePath": "1.1", "children": [ { "NodeName": "chld1", "NodePath": "1.1.1", "children": [] } ] } ] }');
        $scope.testdata.push(myjsondata);
            //console.log($scope.testdata) //This one is showing
            $scope.changename = $scope.testdata[0].children[0].children[0].NodeName;    

        }   

    $timeout(function(){ $scope.Intialfunc(); }, 1000)

    $scope.ShowDetailsCtrlFunc = function(event) {
            console.log("in function ShowDetailsCtrlFunc"); 

            //event.stopImmediatePropagation(); 
      };
});

Я попробовал angular.copy, но для этого нужна часть данных JSON в переменной $scope и обновляет эту переменную, как и ожидалось.

Но мои данные JSON будут огромными, и я не знаю, как их обновить без использования переменной. Пожалуйста помоги.


angularjs angularjs-forms
person usersam    schedule 12.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать ng-change для выполнения действия при изменении ввода:

<input type="text" ng-model="changename" ng-change="inputChange()">

Затем просто создайте функцию в своем контроллере, которая обновляет то, что вам нужно:

$scope.inputChange = function() {
  // do stuff here
  $scope.testdata[0].children[0].children[0].NodeName = $scope.changename;
  // write object to JSON
  var JSONstring = $scope.testdata.toJSON();
}

Я также рекомендую просмотреть ng-model-options и изменить настройки устранения отказов, чтобы не постоянно toJSONing с каждым нажатием клавиши.

http://plnkr.co/edit/dPWsowm4Puwajgk6CfvA?p=preview

person Pop-A-Stash    schedule 12.03.2018
comment
Браво !! Это именно то, что я хочу. Не думал, что это может быть так просто. Спасибо @Pop-A-Stash. - person usersam; 12.03.2018
comment
Но есть только одна проблема. Если путь $scope.testdata[0].children[0].children[0].NodeName слишком длинный, это может вызвать проблемы с производительностью. - person usersam; 12.03.2018
comment
Я согласен. Это совсем не долгосрочное решение. Я просто показываю вам, как вы можете внести изменения при изменении поля формы. В идеале вы должны сопоставить каждый узел в вашем JSON с переменной области действия И соответствующим вводом формы с директивой ng-change. - person Pop-A-Stash; 12.03.2018