CODEWITHSUNDEEP
angularjs
Dean Christian Armada
Dean Christian Armada

Reputation: 7364

Unbinding an array on AngularJS

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>

Upvotes: 2

Views: 183

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Use angular.copy.

    $scope.reset = function(){

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

For more info, see AngularJS angular.copy API Reference

Upvotes: 2

fbid
fbid

Reputation: 1570

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)

Upvotes: 1

Related Questions