Geek Answers Handbook

Use angular to mark modified items in a list.

I want to synchronize data, so I have a data object containing the current state. When this change, I would like to set the attribute of the object so that I can filter it during synchronization. Object structure:

data = { type1: [ {a:"a", b:"b"},... ] type2: [ {c:"c", d:"d"},... ] }

For example, if data.type1 [0] .a = "test" is executed, I would like to add a modified: true for the object so that it is

 {a:"test", b:"b", modified:true}

I tried $ watch (data, function (), true), but I can’t find how I can see which object was modified, and finding both data of data objects will be a big overhead. $ watchcollection (when just looking for add / remove) also does not give an index.
Is there any way to find out which object has been modified? Or is there another library that can do this well?

thanks

EDIT:
I created jsfiddle: https://jsfiddle.net/yfo8xwah/

+7
javascript synchronization angularjs
source share
5 answers

Although this is a stupid workaround, what you can do is store the method in a data object, for example:

 data = {type1 : {}, type2 : {}, ... , checkModification : function (field) {data[field].modified = true; return data[field];}}

Now you can assign any object like this to data.checkModification ('type1'). a = "test" This may give you a satisfactory result.

0
source share

Ok, I did the job: https://jsfiddle.net/yfo8xwah/4/ .

First of all, I applied a simple observer in the data model. Inside the observer, I used this beautiful library to compare objects and match any differences and enter a modification flag.

So my $ watch function looks like this:

 $scope.$watch(function () { return $scope.data; }, function (newD, oldD, scope) { //dont run on init mate ;) if (angular.equals(newD, oldD)) { return; } //now find the differences and apply em var diffs = objectDiff.diffOwnProperties(newD, oldD); console.log(diffs, "diffs"); if (diffs.changed != "equal") { //you should solve this recursively ;) angular.forEach(diffs.value, function (value, key) { if (value.changed != "equal") { angular.forEach(value.value, function (subvalue, subkey) { if (subvalue.changed != "equal") { $scope.data[key][subkey]["modified"] = true; } }); } }); } }, true);
0
source share

After considering the various options, I decided that it was necessary to use custom getters / setters.

This is necessary because no real event handler exists, and it would be very inefficient to always compare the entire data set (which may have several thousand elements).

0
source share

I think this will help ......

 var app = angular.module('sample', []); app.controller("MyAppCtrl", function ($scope, $timeout) { $scope.data = { type1: [{ a: "a", b: "b" }, { a: "c", b: "d" }], type2: [{ m: 0, k: 1 }, { m: 45, k: 92 }] } $scope.$watch('data.type1[0].a', function () { console.log('data changed'); $scope.data.type1[0].modified = true; console.log($scope.data.type1[0]) }); }); 
 <body ng-app="sample"> <div ng-controller="MyAppCtrl"> <input type="text" ng-model="data.type1[0].a"> <br> <label>{{data.type1[0].a}}</label> </div> </body>

https://jsfiddle.net/basilin/p92Lkn93/

0
source share

Give it a try. Whenever a specific property of an object is changed by input, such as a text field

While the change event passes this object to this function, as shown below:

 <input data-ng-model="data.type1.a" type="text" data-ng-change="onChage(data.type1)"/> $scope.onChage = function (object) { object.IsDirty = 'modified'; };
0
source share

More articles:


All Articles