0

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>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
vivek
  • 383
  • 2
  • 23

2 Answers2

1

use unshift.

$scope.albumNameArray.unshift(album.name);
Dixit
  • 1,359
  • 3
  • 18
  • 39
  • but unshift adds at the beginning – Laazo Jun 26 '17 at 09:57
  • Check this link this will help you. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_unshift – Dixit Jun 26 '17 at 10:00
  • if i use unshift it reverse that order.suppose if i check test1 and test3 it would add into array the order will be like test1,test3 . after i checked test2 when i click button again the order should be test1,test3,test2 – vivek Jun 26 '17 at 10:00
  • 1
    The unshift() method adds new items to the beginning of an array and returns the new length.This method changes the length of an array.To add new items at the end of an array, use the push() method. – Chirag Patel Jun 26 '17 at 10:05
1

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

Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62