Reputation: 393

Insert checked checkbox value at the end

I have a check box with a button.

When I click button checked, checkbox value should be pushed into an array. But it adds at the beginning of an array. I want to add checked checkbox value at the end of the array when clicking the button.

    <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
      <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
    
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body ng-app='test' ng-controller="Test">
    	<ul>
    		<li ng-repeat="album in albums">
    		  <input type="checkbox" ng-model="album.selected" value={{album.name}} /> {{album.name}}
    		</li>
    	</ul>
      
    	<button type='button' ng-click="save()">Save</button><br>
    		<div ui-sortable="sortableOptionsList[0]" >
    			{{albumNameArray}}
    		</div>
    		<div ui-sortable="sortableOptionsList[0]">
    			<div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
    		</div>
    	</body>
    </html>
    <script>
    angular.module('test', ['ui.sortable'])
    
    .controller('Test', function($scope){
    
      $scope.albums = [{
        id: 1,
        name: 'test1',
        checked : false
      },
      {
        id: 2,
        name: 'test2',
        checked : false
      },
      {
        id: 3,
        name: 'test3',
        checked : false
      }];
      
       function createOptions (listName) {
    	   console.log('outout');
        var _listName = listName;
        var options = {
          placeholder: "app",
          connectWith: ".apps-container",
          helper: function(e, item) {
            console.log("list " + _listName + ": helper");
            return item;
          }
        };
        return options;
      }
    
      $scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
     
      
      
      $scope.save = function(){
        $scope.albumNameArray = [];
    
        angular.forEach($scope.albums, function(album){
    		console.log(album.selected);
    		if(album.selected)
    		{
    			$scope.albumNameArray.push(album.name);
    		}
     
        });
      }
    })    
    </script>

Upvotes: 0

Answers (2)

Ankit Agarwal

Reputation: 30739

I have the perfect solution for your query. You just need to make a small change on the logic. Since you want to track the sequence on which the checkboxes are selected, i would suggest you the proper way in AngularJS, using ng-change on the checkbox.

    <html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
  <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app='test' ng-controller="Test">
    <ul>
        <li ng-repeat="album in albums">
          <input type="checkbox" ng-model="album.selected" value={{album.name}} ng-change='trackOrder(album)' /> {{album.name}}
        </li>
    </ul>

    <button type='button' ng-click="save()">Save</button><br>
        <div ui-sortable="sortableOptionsList[0]" >
            {{albumNameArray}}
        </div>
        <div ui-sortable="sortableOptionsList[0]">
            <div class="app" ng-repeat="app in albumNameArray"> {{app.name}}</div>
        </div>
    </body>
</html>
<script>
angular.module('test', ['ui.sortable'])

.controller('Test', function($scope){

  $scope.albumArray = [];

  $scope.albums = [{
    id: 1,
    name: 'test1',
    checked : false
  },
  {
    id: 2,
    name: 'test2',
    checked : false
  },
  {
    id: 3,
    name: 'test3',
    checked : false
  }];

  function createOptions (listName) {
    console.log('outout');
    var _listName = listName;
    var options = {
      placeholder: "app",
      connectWith: ".apps-container",
      helper: function(e, item) {
        console.log("list " + _listName + ": helper");
        return item;
      }
    };
    return options;
  }

  $scope.sortableOptionsList = [createOptions('A'), createOptions('B')];

  $scope.trackOrder = function(album){
    //add album in the array
     if(album.selected){
       $scope.albumArray.push(album.name);
     }else{
       //remove album fron the array 
       var index = $scope.albumArray.indexOf(album.name);
       $scope.albumArray.splice(index,1);
     }
  }


  $scope.save = function(){
    //if you want the value on albumNameArray on click on save use this else you can 
    //use the $scope.albumArray directly
    $scope.albumNameArray = angular.copy($scope.albumArray);
  }
})


</script>

Here is the plunkr link PLUNKR

Upvotes: 1

Dixit

Reputation: 1379

use unshift.

$scope.albumNameArray.unshift(album.name);

Upvotes: 1

Insert checked checkbox value at the end

Answers (2)

Related Questions