Skip to content

Instantly share code, notes, and snippets.

@pklink
Created March 3, 2015 16:08
Show Gist options
  • Save pklink/667282ee687d5fb610c0 to your computer and use it in GitHub Desktop.
Save pklink/667282ee687d5fb610c0 to your computer and use it in GitHub Desktop.
JS Bin angularjs: $watch on an array; differences between `[].push(val)` and `= [].concat([val])` // source http://jsbin.com/hikake
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="angularjs: $watch on an array; differences between `[].push(val)` and `= [].concat([val])`">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="myController">
<button type="button" ng-click="addValueByPush()">add by push</button><br />
<button type="button" ng-click="addValueByOverwrite()">add by overwrite</button>
<script id="jsbin-javascript">
var app;
app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.value = [];
$scope.addValueByPush = function() {
$scope.value.push(1);
}
$scope.addValueByOverwrite = function() {
$scope.value = $scope.value.concat([1]);
}
$scope.$watch('value', function() {
console.log($scope.value)
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="angularjs: $watch on an array; differences between `[].push(val)` and `= [].concat([val])`">
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="myController">
<button type="button" ng-click="addValueByPush()">add by push</button><br />
<button type="button" ng-click="addValueByOverwrite()">add by overwrite</button>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var app;
app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.value = [];
$scope.addValueByPush = function() {
$scope.value.push(1);
}
$scope.addValueByOverwrite = function() {
$scope.value = $scope.value.concat([1]);
}
$scope.$watch('value', function() {
console.log($scope.value)
});
});
</script></body>
</html>
var app;
app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.value = [];
$scope.addValueByPush = function() {
$scope.value.push(1);
}
$scope.addValueByOverwrite = function() {
$scope.value = $scope.value.concat([1]);
}
$scope.$watch('value', function() {
console.log($scope.value)
});
});
@renanborgez
Copy link

Hi, is your array concat triggering the $watch ?
I need the same aproach but i can't trigger the $watch when i concat my arrays with a override

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment