Question

＆＃13;

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.teams = [
      {id:1, name:'Chinmay Sahu'},
      {id:2, name:'PHP Chinu'},
      {id:3, name:'Sanjib Pradhan'}
    ];
    
    $scope.myTeams = [
      {id:1, name:'Chinmay Sahu'}
    ];
    
    $scope.add = function() {
            angular.forEach($scope.teams, function(val, key) {
                if (val.checked == true) {
                    if ($scope.myTeams.length > 0) {
                        var dat = $scope.myTeams.find(function(o) {
                            return o.user_id === val.id;
                        });
                    } else {
                        var dat = {};
                    }
                    if (dat) {
                        $scope.myTeams.push({user_id: val.id, name: val.name});
                    }
                }
            });
        };
        $scope.remove = function() {
            
        };
    

    $scope.submit = function() {
        
    };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
        <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">


<div class="col-sm-4" style=" width: 30%; float: left; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
    <div class="col-sm-12" ng-repeat="empList in teams">
        <div class="row">
            <div class="checkbox checkbox-info radio-inline">
                <input type="checkbox" id="empList{{$index}}" ng-model="empList.checked">
                <label for="empList{{$index}}" ng-bind="empList.name"></label>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-4" style="width: 30%; float:left; text-align: center; padding: 15px">
    <div class="col-sm-12 m-b">
        <button class="btn btn-w-m btn-success" type="button" ng-click="add()">Add&nbsp;&nbsp;<i class="fa fa-angle-right"></i></button>
        <br>
        <button class="btn btn-w-m btn-primary" type="button" ng-click="remove()"><i class="fa fa-angle-left"></i>&nbsp;&nbsp;Remove</button>
    </div>
</div>
<div class="col-sm-4 grey-bg" style="width:30%; float:lfet; background: #eeeeee; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
    <div class="col-sm-12" ng-repeat="myteam in myTeams">
        <div class="col-xs-7">
            <div class="row">
                <div class="checkbox checkbox-info radio-inline">
                    <input type="checkbox" id="member{{$index}}">
                    <label for="member{{$index}}" ng-bind="myteam.name"></label>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="checkbox checkbox-info radio-inline">
                    <select class="privacy" ng-model="myteam.privacy">
                        <option value="">Select Privacy</option>
                        <option value="1">Public</option>
                        <option value="2">Private</option>
                        <option value="3">Hidden</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>




        </div>
    </body>

＆＃13;

我的页面看起来

我发布了示例代码。我有3个用户（静态），我的团队有1个用户。如果用户在我的团队中，我想将左框添加到右框并删除左侧。目前我在我的团队中找到了一个用户，因此用户不应该在我的用户列表中显示。例如。 - 我有一个用户名PHP Chinu如果我选中此项并点击Add >按钮，则应从左侧框中删除此PHP Chinu，这将显示在右侧灰色框中。

我尝试了很多方法。但没有得到任何正确的解决方案。我想向我的团队添加和删除用户。请帮我。

NB： $scope.teams和$scope.myTeams这两个变量包含动态值。

Answer 1

有几个问题：

不一致的属性名称...混合使用id和user_id的示例
您需要为所有对象添加已检查的属性
您的添加功能正在对“数据”进行真正的检查。在推之前哪个应该是假的检查

您生成的代码如下所示：

＆＃13;

var demoApp = angular.module('myApp', []);

demoApp.controller('QaController', function($scope, $http) {

  $scope.teams = [{
    id: 1,
    name: 'Chinmay Sahu',
    checked: false
  }, {
    id: 2,
    name: 'PHP Chinu',
    checked: false
  }, {
    id: 3,
    name: 'Sanjib Pradhan',
    checked: false
  }];

  $scope.myTeams = [{
    id: 1,
    name: 'Chinmay Sahu',
    checked: false
  }];

  $scope.add = function() {
    angular.forEach($scope.teams, function(val, key) {
      if (val.checked === true) {
        val.checked = false;
        var dat;
        if ($scope.myTeams.length > 0) {
          dat = $scope.myTeams.find(function(o) {
            return o.id === val.id;
          });
        }
        if (!dat) {
          $scope.myTeams.push({
            id: val.id,
            name: val.name
          });
        }
      }
    });
  };
  
  $scope.remove = function() {
    $scope.myTeams.reduceRight(function(acc, team, index, object) {
      if (team.checked === true) {
        object.splice(index, 1);
      }
    }, []);
  };

  $scope.submit = function() {

  };

});

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
  <script src="app.js"></script>
</head>

<body ng-app="myApp">
  <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
    <div class="col-sm-4" style=" width: 30%; float: left; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
      <div class="col-sm-12" ng-repeat="empList in teams">
        <div class="row">
          <div class="checkbox checkbox-info radio-inline">
            <input type="checkbox" id="empList{{$index}}" ng-model="empList.checked">
            <label for="empList{{$index}}" ng-bind="empList.name"></label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4" style="width: 30%; float:left; text-align: center; padding: 15px">
      <div class="col-sm-12 m-b">
        <button class="btn btn-w-m btn-success" type="button" ng-click="add()">Add&nbsp;&nbsp;<i class="fa fa-angle-right"></i></button>
        <br>
        <button class="btn btn-w-m btn-primary" type="button" ng-click="remove()"><i class="fa fa-angle-left"></i>&nbsp;&nbsp;Remove</button>
      </div>
    </div>
    <div class="col-sm-4 grey-bg" style="width:30%; float:lfet; background: #eeeeee; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
      <div class="col-sm-12" ng-repeat="myteam in myTeams">
        <div class="col-xs-7">
          <div class="row">
            <div class="checkbox checkbox-info radio-inline">
              <input type="checkbox" id="member{{$index}}" ng-model="myteam.checked">
              <label for="member{{$index}}" ng-bind="myteam.name"></label>
            </div>
          </div>
        </div>
        <div class="col-xs-5">
          <div class="row">
            <div class="checkbox checkbox-info radio-inline">
              <select class="privacy" ng-model="myteam.privacy">
                <option value="">Select Privacy</option>
                <option value="1">Public</option>
                <option value="2">Private</option>
                <option value="3">Hidden</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

在左侧，仅显示不在myTeams列表中的项目 - 使用Array.prototye.filter和Array.prototype.some过滤列表
添加时，从已过滤的列表中获取已检查的项目，并将对象的副本添加到myTeams列表
删除时，会从myTeams列表中过滤未经检查的值，并将其分配回myTeams列表。

＆＃13;

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

  $scope.teams = [{
      id: 1,
      name: 'Chinmay Sahu'
    },
    {
      id: 2,
      name: 'PHP Chinu'
    },
    {
      id: 3,
      name: 'Sanjib Pradhan'
    }
  ];
  
  $scope.myTeams = [{
    id: 1,
    name: 'Chinmay Sahu'
  }];
  
  $scope.getTeams = function(){
    return $scope.teams.filter(function(team){
      return !$scope.myTeams.some(function(sTeam){
        return sTeam.id===team.id;
      });
    });
  };

  $scope.add = function() {
    var selectedList = $scope.getTeams().filter(function(team){
      return team.checked;
    }).map(function(team){
      team.checked = false;
      team.privacy = '';
      var _copy = angular.copy(team);
      return _copy;
    });
    
    $scope.myTeams = $scope.myTeams.concat(selectedList);
  };
  
  $scope.remove = function() {
    $scope.myTeams = $scope.myTeams.filter(function(team){
      return !team.checked;
    });
  };


  $scope.submit = function() {
  
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
  <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">


    <div class="col-sm-4" style=" width: 30%; float: left; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
    <i ng-if="!getTeams().length">nothing to select</i>
      <div class="col-sm-12" ng-repeat="empList in getTeams()">
        <div class="row">
          <div class="checkbox checkbox-info radio-inline">
            <input type="checkbox" id="empList{{$index}}" ng-model="empList.checked">
            <label for="empList{{$index}}" ng-bind="empList.name"></label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4" style="width: 30%; float:left; text-align: center; padding: 15px">
      <div class="col-sm-12 m-b">
        <button class="btn btn-w-m btn-success" type="button" ng-click="add()">Add&nbsp;&nbsp;<i class="fa fa-angle-right"></i></button>
        <br>
        <button class="btn btn-w-m btn-primary" type="button" ng-click="remove()"><i class="fa fa-angle-left"></i>&nbsp;&nbsp;Remove</button>
      </div>
    </div>
    <div class="col-sm-4 grey-bg" style="width:30%; float:lfet; background: #eeeeee; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
      <i ng-if="!myTeams.length">nothing added</i>
      <div class="col-sm-12" ng-repeat="myteam in myTeams">
        <div class="col-xs-7">
          <div class="row">
            <div class="checkbox checkbox-info radio-inline">
              <input type="checkbox" id="member{{$index}}" ng-model="myteam.checked">
              <label for="member{{$index}}" ng-bind="myteam.name"></label>
            </div>
          </div>
        </div>
        <div class="col-xs-5">
          <div class="row">
            <div class="checkbox checkbox-info radio-inline">
              <select class="privacy" ng-model="myteam.privacy">
                        <option value="">Select Privacy</option>
                        <option value="1">Public</option>
                        <option value="2">Private</option>
                        <option value="3">Hidden</option>
                    </select>
            </div>
          </div>
        </div>
      </div>
    </div>




  </div>
</body>

＆＃13;

Answer 3

您需要保持 ID 的一致性，因此在查找方法中进行比较时，它可以找到正确的对象（o.id === val.id）。
另外要注意forEach方法，如果变异并且迭代同一个对象，你会遇到问题，所以最好使用临时变量。
例如

const app = angular.module('some',[])
app.controller('ctr',['$scope', function($scope){  
   $scope.teams = [
      {id:1, name:'Chinmay Sahu'},
      {id:2, name:'PHP Chinu'},
      {id:3, name:'Sanjib Pradhan'}
    ];

    $scope.myTeams = [
      {id:1, name:'Chinmay Sahu'}
    ];
     $scope.add = function() {   
            var aux = Object.assign({},$scope.teams);
            angular.forEach(aux, function(val, key) {
                if (val.checked == true) {                  

                      var dat = $scope.myTeams.find(function(o) {
                            return o.id === val.id;
                       });
              var index = $scope.teams.findIndex(function(o){
                          return o.id === val.id
                      });


                      $scope.teams.splice(index,1);                  
                  if(!dat){
                      $scope.myTeams.push({id: val.id, name: val.name});
                  }

        }


            });
        };

        $scope.remove = function() {
          var aux = Object.assign({},$scope.myTeams);
          angular.forEach(aux, function(val, key) {              
                if (val.checked == true) { 


                      var dat = $scope.teams.find(function(o) {
                            return o.id === val.id;
                        });

                      var index = $scope.myTeams.findIndex(function(o){
                          return o.id === val.id
                        })

                      $scope.myTeams.splice(index,1);
                      if(!dat){                           
                        $scope.teams.push({id: val.id, name: val.name});
                      }                      
                    }

            });

        };


    $scope.submit = function() {

    };
}]);

查看完整的example 希望这有帮助。

Answer 4

var demoApp = angular.module('myApp', []);

demoApp.controller('QaController', function($scope, $http) {

  $scope.teams = [{
    id: 1,
    name: 'Chinmay Sahu',
    checked: false
  }, {
    id: 2,
    name: 'PHP Chinu',
    checked: false
  }, {
    id: 3,
    name: 'Sanjib Pradhan',
    checked: false
  }];

  $scope.myTeams = [];

  $scope.add = function() {
    angular.forEach($scope.teams, function(val, key) {
      if (val.checked === true) {
        var dat;
       
          dat = $scope.teams.find(function(o) {
            return o.id === val.id;
          });
        
    
          $scope.myTeams.push(dat);
          $scope.teams.splice( $scope.teams.indexOf(dat), 1)
        
      }
    });
  };
  
  $scope.remove = function() {
    angular.forEach($scope.myTeams, function(val, key) {
      if (val.checked === true) {
        var dat;
        
          dat = $scope.myTeams.find(function(o) {
            return o.id === val.id;
          });

        
        $scope.teams.push(dat)
        $scope.myTeams.splice( $scope.myTeams.indexOf(dat), 1)

      }
    });
  };


  $scope.submit = function() {

  };

});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
  <script src="app.js"></script>
</head>

<body ng-app="myApp">
  <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
    <div class="col-sm-4" style=" width: 30%; float: left; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
      <div class="col-sm-12" ng-repeat="empList in teams">
        <div class="row">
          <div class="checkbox checkbox-info radio-inline">
            <input type="checkbox" id="empList{{$index}}" ng-model="empList.checked">
            <label for="empList{{$index}}" ng-bind="empList.name"></label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4" style="width: 30%; float:left; text-align: center; padding: 15px">
      <div class="col-sm-12 m-b">
        <button class="btn btn-w-m btn-success" type="button" ng-click="add()">Add&nbsp;&nbsp;<i class="fa fa-angle-right"></i></button>
        <br>
        <button class="btn btn-w-m btn-primary" type="button" ng-click="remove()"><i class="fa fa-angle-left"></i>&nbsp;&nbsp;Remove</button>
      </div>
    </div>
    <div class="col-sm-4 grey-bg" style="width:30%; float:lfet; background: #eeeeee; border: 1px solid #e7eaec; padding-bottom: 10px; max-height: 150px; overflow: auto;">
      <div class="col-sm-12" ng-repeat="myteam in myTeams">
        <div class="col-xs-7">
          <div class="row">
            <div class="checkbox checkbox-info radio-inline">
              <input type="checkbox" id="member{{$index}}" ng-model="myteam.checked">
              <label for="member{{$index}}" ng-bind="myteam.name"></label>
            </div>
          </div>
        </div>
        <div class="col-xs-5">
          <div class="row">
            <div class="checkbox checkbox-info radio-inline">
              <select class="privacy" ng-model="myteam.privacy">
                <option value="">Select Privacy</option>
                <option value="1">Public</option>
                <option value="2">Private</option>
                <option value="3">Hidden</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

如何在多个复选框中添加和删除用户，方法是单击＆＃34;添加＆＃34;和＆＃34;删除＆＃34; AngularJS中的按钮？

我的页面看起来

4 个答案: