javascript - angularJs 复选框 获取对象数组 问题
PHP中文网
PHP中文网 2017-04-11 09:44:37
[JavaScript讨论组]

已经实现 单选多选获取 对应值的ID 存入对应数组现在 想同时取到 id,code,name三个值 成为三个数组,没有思路求帮助解答,具体代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../angular-1.3.0.14/angular.js" ></script>
    </head>
    <body ng-app="myApp">
        <p ng-controller="MyCtrl">
     <table class="table">
         <thead>
             <tr>
                 <th>
                     <input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"/>
                 </th>
                 <th>全选</th>
             </tr>
         </thead>
         <tbody>
             <tr ng-repeat="e in users" ng-class="getSelectedClass(e.id)">
                 <td>
                     <input type="checkbox" name="selected" ng-checked="isSelected(e.id)" ng-click="updateSelection($event, e.id)"/>
                 </td>
                 <td>{{e.name}}</td>
             </tr>
             <p>id{{selected}}</p>
             <p>姓名{{selected1}}</p>
             <p>帐号{{selected2}}</p>
             <button ng-click="ck()">点我</button>
         </tbody>
     </table>
 </p>
 <script>
     var myApp = angular.module('myApp', []);
 MyCtrl = function ($scope,$http) {
     $scope.users=[{
        "id": "1",
        "code": "123",
        "name": "qweww",
        "email": "70ee6533@qq.com"
      },
      {
        "id": "2",
        "code": "130",
        "name": "xueeen",
        "email": "70ee533@qq.com"
      },{
        "id": "3",
        "code": "1233",
        "name": "qwe1",
        "email": "707116533@qq.com"
      },
      {
        "id": "4",
        "code": "13230",
        "name": "xueq3uan",
        "email": "707116533@qq.com"
      }];
     $scope.ck = function(){
         if($scope.selected.length == 0){
             alert("空")
         }else{
             alert("非空")
         }
     }
     $scope.selected = [];
     $scope.selected1 = [];
     $scope.selected2 = [];
     var updateSelected = function (action, id ,name) {
         if (action == 'add' & $scope.selected.indexOf(id) == -1) $scope.selected.push(id);
         if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1);
     }


     $scope.updateSelection = function ($event, id) {
         var checkbox = $event.target;
         var action = (checkbox.checked ? 'add' : 'remove');
         updateSelected(action, id);
     };


     $scope.selectAll = function ($event) {
         var checkbox = $event.target;
         var action = (checkbox.checked ? 'add' : 'remove');
         for (var i = 0; i < $scope.users.length; i++) {
             var entity = $scope.users[i];
             updateSelected(action, entity.id);
         }
     };


     $scope.getSelectedClass = function (entity) {
         return $scope.isSelected(entity.id) ? 'selected' : '';
     };


     $scope.isSelected = function (id) {
         return $scope.selected.indexOf(id) >= 0;
     };

     $scope.isSelectedAll = function () {
         return $scope.selected.length === $scope.users.length;
     };
 }

 </script>
    </body>
</html>
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
ringa_lee

直接在你的代码的基础上更改了一点

点击预览效果和看代码
https://jsfiddle.net/998s7vko/

核心更改在这儿,里面一串push不是特别优雅,主要是思路

  var updateSelected = function(action, item, name) {
    let index = $scope.selected.indexOf(item.id);
    if (action == 'add' && index == -1) {
      $scope.selected.push(item.id);
      $scope.selected1.push(item.name);
      $scope.selected2.push(item.email);
    }
    if (action == 'remove' && index != -1) {
      $scope.selected.splice(index, 1);
      $scope.selected1.splice(index, 1);
      $scope.selected2.splice(index, 1);
    }
  }
伊谢尔伦

没看源码,直接绑定在数组的元素上不行?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号