Как получить значение текущего изменяемого элемента массива?

Question

[Алексей Ярков]

Есть контроллер:

App.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {

	$scope.sortFunc = function (a, b) {
		if (a.id> b.id) {
			return 1;
		}
		if (a.id< b.id) {
			return -1;
		}
		return 0;
	};

	$scope._url = "";
	$scope._login = "";
	$scope._password = "";
	$scope.data = [];
	/*
		$scope.data = [
			{id: 1, url: "http://example.org", login: "user", password: "12345"},
			{id: 2, url: "http://example2.org", login: "user2", password: "12345"},
			...
		]
	*/
	
	if(localStorage["data"]){
		$scope.data = JSON.parse(localStorage["data"]);
		$scope.data.sort($scope.sortFunc);
	}
	
	$scope.Delete = function(id){
		if(!id){
			return;
		}
		var idObject = $scope.data.find({"id": id});
		if(!idObject){
			return;
		}
		$scope.data = $scope.data.exclude({"id": id});
		idObject = null;
		console.log("Delete item with id:", id);
	}
	
	$scope.Add = function(){
		var tempArr = $scope.data;
		tempArr = tempArr.sort($scope.sortFunc);
		
		var inc = 1;
		
		if(tempArr.length > 0){
			var lastItem = tempArr.last();
			inc = lastItem.id+1;
		}
		
		$scope.data.push({
			id: inc,
			url: $scope._url,
			login: $scope._login,
			password: $scope._password
		});
		$scope.data.sort($scope.sortFunc);
		
		$scope._url = "";
		$scope._login = "";
		$scope._password = "";
		
		console.log("Add item with id:", inc);
	}
	
	$scope.$watch(
		'data', 
		function(newVal, oldVal, scope){
			if(newVal.length < 0){
                return;
            }
			localStorage["data"] = JSON.stringify($scope.data);
			console.log(newVal);
		},
		true
	);
  
}]);

В $scope.$watch newVal содержит $scope.data массив. И соответственно сохранение в localStorage происходит при изменении любого элемента массива.
Можно как-то получить значение текущего измененного свойства объекта в этом массиве? Мне нужно сделать проверку не пустое ли оно, чтобы не сохранять пустые значения в массив.

Более подробно можно глянуть исходник тут: github

Временное демо тут: демо

Answer 1

[Сергей Протько]

Время рефакторинга!

$scope._url = "";
$scope._login = "";
$scope._password = "";

Вы же знаете что есть controllerAs который рекомендуется использовать согласно angular styleguide и всем остальным существующим бест практис? (объяснение чем черевато не использовать оное читать в том же angular-styleguide).

$scope.sortFunc = function (a, b) {
    if (a.id> b.id) {
      return 1;
    }
    if (a.id< b.id) {
      return -1;
    }
    return 0;
  };

Вы же знаете что в ангуляре есть встроенный фильтр orderBy?

function AppCtrl(orderByFilter) {
    this.foo = orderByFilter(collection, 'id');
}

var inc = 1;

if(tempArr.length > 0){
var lastItem = tempArr.last();
inc = lastItem.id+1;
}

вы же знаете что это не гарантирует уникальность, и может вызывать проблемы? Для таких вещей удобнее использовать какую-либо реализацию UUID (CUID например: https://github.com/ericelliott/cuid)

Ну и да - ватчер вам тут не нужен так как вы точно знаете когда у вас что произошло. И бейте себя по рукам каждый раз как ставите у ватчера true третьим аргументом.

Comments

[Алексей Ярков]

Время рефакторинга!

Впервые за Angular сел ))

Вы же знаете что в ангуляре есть встроенный фильтр orderBy?

Впервые за Angular сел ))

вы же знаете что это не гарантирует уникальность, и может вызывать проблемы?

Знаю, но пока тренируюсь и меня так устраивает

И бейте себя по рукам каждый раз как ставите у ватчера true третьим аргументом.

Согласно документации только поставив true я смогу отследить изменение элемента массива. Или я мануал не так курил?

А в целом большое спасибо за конструктивную критику ))

[Сергей Протько]

Алексей Ярков: ой я просто дико устал от кода в духе angular 1.0, когда уже есть angular 1.5 и angular2, компоненты и все такое. Надеюсь через месяцок-два доку по ангуляру наконец перепишут.