javascript - angularjs全选只获取id怎么改,现在单选OK,见代码
高洛峰
高洛峰 2017-04-10 18:00:02
[JavaScript讨论组]

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="app">
    <p ng-controller="myCtrl" class="container bg-color">
        <section>
            全选: <input type="checkbox" ng-model="master" ng-click="all(master,user)">
            <p ng-repeat="z in user">
                <input id={{z.id}} type="checkbox" ng-model="x" ng-checked="master" ng-click="checkd(z,x)">{{z.name}}
            </p>
            <button href="#" class="btn btn-danger" ng-click="delete()">批量操作</button>
            <span>{{choseArr}}</span> 
        </section>
    </p>
    <script>
        var app = angular.module('app', []);
        app.controller('myCtrl', function($scope, $http, $timeout){
            $scope.user=[{
                    "id": "1",
                    "code": "1",
                    "name": "黄"
                  },
                  {
                    "id": "2",
                    "code": "2",
                    "name": "红"
                  },
                  {
                    "id": "3",
                    "code": "12",
                    "name": "绿"
                  }];
            $scope.choseArr = [];
            var str = ""; //
            var len = $scope.user.length;
            var flag = '';
            $scope.x = false;

            $scope.all = function(c, v) {
                if(c == true) {
                    $scope.x = true;
                    $scope.choseArr = angular.copy(v);
                    flag = 'a';
                } else {
                    $scope.x = false;
                    $scope.choseArr = [];
                    flag = 'b';
                }

            };
            $scope.checkd = function(z, x) {
                if(flag == 'a') {

                    str = $scope.choseArr.join(',') + ',';
                }
                if(x == true) {
                    str = str + z.id + ',';
                    flag = 'c'
                    if($scope.choseArr.length == len - 1) {
                        $scope.master = true
                    }
                } else {

                    str = str.replace(z.id + ',', '');
                }

                $scope.choseArr = (str.substr(0, str.length - 1)).split(',');
                var dex = $scope.choseArr.indexOf("");
                if(dex >= 0) {
                    $scope.choseArr.splice(dex, 1);
                };
                if($scope.choseArr.length == 0) {
                    $scope.master = false
                };

            };
            $scope.delete = function() {

                if($scope.choseArr[0] == "" || $scope.choseArr.length == 0) {
                    alert("请至少选中一条数据在操作!")
                    return;
                }
                else{
                        console.log($scope.choseArr)    
                }

            };

        });
    </script>

</body>

</html>

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
迷茫
<p ng-repeat="z in user">
    <input id={{z.id}} type="checkbox" ng-model="x" ng-checked="master" ng-click="checkd(z,x)">
       {{z.name}}
</p>

这段我就看得菊花一紧,ng-model都绑定x,那岂不是当x为true的时候就全部勾上了,若false就全部取消了。。。。

不明觉厉

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

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