Question

我有一个带按钮的复选框。

当我单击选中的按钮时，复选框值应该被推入一个数组。但它在数组的开头添加。我想在单击按钮时在数组的 end 处添加选中的复选框值。

    <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>

Answer 1

使用取消取消。

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

Answer 2

我为您的查询提供了完美的解决方案。您只需对逻辑进行一些小改动即可。由于您要跟踪选中复选框的顺序，我建议您使用复选框上的ng-change在AngularJS中使用正确的方法。

    <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>

以下是plunkr链接PLUNKR

在末尾插入选中的复选框值

2 个答案: