Unbinding an array on AngularJS

Question

This is the scenario. I have two scope arrays with predefined values which are "sorts" and "preSort" and they are not binded together. I have buttons that adds values to the "sorts" array and a reset button. The reset button is clicked so that the value of the the "sorts" array will be the same as the value of "preSort" array. However the problem is, when I click the reset. The two arrays are now binded. I wish to be not binded after clicking the reset button

Please see the following code:

 function isInArray(value, array) {	
        return array.indexOf(value) > -1;
		}
		function ascendingArrayList(value, array){
			new_value = value.replace('-', '')
			index = array.indexOf(value);
			// alert(index);
			// Conditional statement is to make sure that it does not delete anything if field did not make any sorting yet
			// Comment the conditional to enable single sorting for each field
			if(index != -1){
				array.splice(index, 1);
			}
			array.push(new_value);
			return array;
		}
		function descendingArrayList(value, array){
			new_value = value.replace('-', '')
			index = array.indexOf(new_value);
			// Conditional statement is to make sure that it does not delete anything if field did not make any sorting yet
			// Comment the conditional to enable single sorting for each field
			if(index != -1){
				array.splice(index, 1);
			}
			array.push(value);
			return array;
		}


	    var app = angular.module('myApp', []);
		app.config(function($interpolateProvider, $httpProvider) {
			// Change template tags
		    $interpolateProvider.startSymbol('[[');
		    $interpolateProvider.endSymbol(']]');
		});

		app.controller('myController', function($scope) {
			$scope.sorts = ["rank_order"];
			$scope.preSort = ["rank_order"];
			$scope.tableHeaders = [
				{'name': 'No.', 'field':'-rank_order'},
				{'name': 'Code'},
				{'name': 'Description'},
				{'name': 'Department', 'field':'-rank_department'},
				{'name': 'Type', 'field':'-rank_type'},
				{'name': 'Updated By', 'field':'-updated_by__bio__user_code'},
				{'name': 'Date Updated', 'field':'-date_updated'},
			];
			$scope.reset = function(){
				
				$scope.sorts = $scope.preSort;
			}

			$scope.sort = function(field){

		    	if(isInArray(field, $scope.sorts)){
		    		$scope.sorts = ascendingArrayList(field, $scope.sorts)
		    	}else{
		    		// $scope.sorts.push(field);
		    		$scope.sorts = descendingArrayList(field, $scope.sorts)
		    	}
			}
		});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
	<table border="1px">
	   <tr>
		  <th ng-repeat="x in tableHeaders">
			[[x.name]] <span ng-if="x.field" ng-click="sort(x.field, $event)"><u>Click to Sort</u></span>
		  </th>
		</tr>
   </table>
	   preSort:[[ preSort ]] ------------------------------- sorts: [[ sorts ]]
	  <br />
	  <button ng-click="reset()">Click to reset</button>	
</div>

try this $scope.reset = function(){ $scope.sorts = ["rank_order"]; } — Hadi
– Hadi, Commented Mar 16, 2016 at 8:15

georgeawg · Accepted Answer · 2016-03-16 08:25:56Z

2

Use angular.copy.

    $scope.reset = function(){

        $scope.sorts = angular.copy($scope.preSort);
    }

For more info, see AngularJS angular.copy API Reference

answered Mar 16, 2016 at 8:25

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fbid · Accepted Answer · 2016-03-16 08:20:38Z

1

Inside $scope.reset() you have to use something to clone the array instead of doing an assignment between scope variables.

You can use for example underscore's _.map functions

$scope.sorts = _.map($scope.preSorts, _.clone)

answered Mar 16, 2016 at 8:20

fbid

1,5702 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

Unbinding an array on AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related