angular 求解_JavaScript_论坛

angular 求解

bo***18 分类：JavaScript 人气：872 回帖：2 发布于6年前收藏

<!DOCTYPE html >
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cc{
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        .cc td{
            text-align: center;
            padding: 6px 6px;
            border: 1px solid #ccc;
            height: 20px;
        }

    </style>


</head>
<body ng-controller="siteCtrl">
    <table border="1" cellpadding="0" cellspacing="0" class="cc" >
        <tr>
            <td>组</td>
            <td>组下项</td>
        </tr>

        <tr ng-repeat="item1 in dataList">
            <td>
                <input type="checkbox" ng-model="item1.ProState" ng-click="selectItem(item1.ProState,item1.ProName)">
            {{item1.ProList}}
            </td>
            <td>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr ng-repeat="item in item1.data">
                <td><input type="checkbox"  ng-model="item.state" name="" ng-checked="item.state"></td>
                <td>{{item.Name}}</td>
                <td>{{item.Url}}</td>
                <td>{{item.Email}}</td>
                    <td><button ng-click="add(item.ProName,$index)">增加</button></td>
                </tr>
            </table>
            </td>
        </tr>
    </table>
    <!--<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>-->
    <script type="text/javascript" src="js/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('siteCtrl',function ($scope,$http) {

        $scope.dataList =[
            {
                "ProList":"a1",
                "ProName":"g1",
                "ProState":false,
                "data" :[
                            {
                            "Name":"john1",
                            "Url":"ImJohn.cn",
                            "Email":"go",
                            "state":true,
                            "ProName":"g1"
                            },
                            {
                                "Name":"john1",
                                "Url":"ImJohn.cn",
                                "Email":"go",
                                "state":false,
                                "ProName":"g1"
                            },
                            {
                                "Name":"john1",
                                "Url":"ImJohn.cn",
                                "Email":"go",
                                "state":false,
                                "ProName":"g1"
                            }
                        ]
            },
            {
                "ProList":"a2",
                "ProName":"g2",
                "ProState":false,
                "data":[
                    {
                        "Name":"john2",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g2"
                    },
                    {
                        "Name":"john2",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g2"
                    },
                    {
                        "Name":"john2",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g2"
                    }
                ]
            },
            {
                "ProList":"a3",
                "ProName":"g3",
                "ProState":false,
                "data":[
                    {
                        "Name":"john3",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g3"
                    },
                    {
                        "Name":"john3",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g3"
                    },
                    {
                        "Name":"john3",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g3"
                    }
                ]
            }
        ]

        $scope.selectItem=function (vf,Pro) {
            if(!vf){
                $scope.dataList.map(function (item) {
                    $scope.idata =item.data;
                    $scope.idata.map(function(tem){
                        if(tem.ProName==Pro){
                            tem.state=true;
                        }
                        return item;
                    });
                });
            }else{
                $scope.dataList.map(function (item) {
                    $scope.idata =item.data;
                    $scope.idata.map(function(tem){
                        if(tem.ProName==Pro){
                            tem.state=false;
                        }
                        return item;
                    });
                });
            }

        };
        $scope.add=function(item,index){
            var map = {
                "Name":item.Name,
                "Url":item.Url,
                "Email":item.Email,
                "state":true,
                "ProName":item.ProName
            };

            $scope.dataList.map(function (item3) {
                $scope.idata =item3.data;
                $scope.idata.map(function(tem){
                    if(tem.ProName==item){
                        $scope.tdata =[];
                        $scope.tdata.push(tem)
                    }
                    $scope.tdata.splice(index+1,0,map);
                    item = $scope.tdata;
                    return item;
                });
            });

        }

    })

</script>
</body>
</html>

组下项全部选中时组选中组下项全不选组不选这个用state怎么做 add函数添加行怎么直接拿item当前项下的数据添加

标签：javascript

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv6 码匠

sc***29 PHP开发工程师 6年前#1

看看这样行吗

<!DOCTYPE html >
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .cc {
      border: 1px solid #ccc;
      border-collapse: collapse;
    }

    .cc td {
      text-align: center;
      padding: 6px 6px;
      border: 1px solid #ccc;
      height: 20px;
    }
  </style>


</head>

<body ng-controller="siteCtrl">
  <table border="1" cellpadding="0" cellspacing="0" class="cc">
    <tr>
      <td>组</td>
      <td>组下项</td>
    </tr>

    <tr ng-repeat="item1 in dataList">
      <td>
        <input type="checkbox" ng-model="item1.ProState" ng-change="selectItem(item1)"> {{item1.ProList}}
      </td>
      <td>
        <table border="0" cellpadding="0" cellspacing="0">
          <tr ng-repeat="item in item1.data">
            <td>
              <input type="checkbox" ng-model="item.state" name="" ng-checked="item.state" ng-change="change(item1)">
            </td>
            <td>{{item.Name}}</td>
            <td>{{item.Url}}</td>
            <td>{{item.Email}}</td>
            <td>
              <button ng-click="add(item, item1.data)">增加</button>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <!-- <script type="text/javascript" src="js/angular.min.js"></script> -->
  <script>
    var app = angular.module('app', []);
    app.controller('siteCtrl', function ($scope, $http) {

      $scope.dataList = [
        {
          "ProList": "a1",
          "ProName": "g1",
          "ProState": false,
          "data": [
            {
              "Name": "john1",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": true,
              "ProName": "g1"
            },
            {
              "Name": "john1",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g1"
            },
            {
              "Name": "john1",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g1"
            }
          ]
        },
        {
          "ProList": "a2",
          "ProName": "g2",
          "ProState": false,
          "data": [
            {
              "Name": "john2",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g2"
            },
            {
              "Name": "john2",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g2"
            },
            {
              "Name": "john2",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g2"
            }
          ]
        },
        {
          "ProList": "a3",
          "ProName": "g3",
          "ProState": false,
          "data": [
            {
              "Name": "john3",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g3"
            },
            {
              "Name": "john3",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g3"
            },
            {
              "Name": "john3",
              "Url": "ImJohn.cn",
              "Email": "go",
              "state": false,
              "ProName": "g3"
            }
          ]
        }
      ]
      $scope.change = function(pro) {
        console.log(pro);
        pro.ProState = pro.data.every( person => person.state)
      }
      $scope.selectItem = function (item) {
          item.data.forEach(function(person) {
            person.state = item.ProState;
          })
      };
      $scope.add = function (item, datas) {
        var newItem = angular.extend({}, item);
        datas.push(newItem);

      }

    })

  </script>
</body>

</html>

Lv4 码徒

c2***31 交互设计师 6年前#2

<!DOCTYPE html >
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cc{
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        .cc td{
            text-align: center;
            padding: 6px 6px;
            border: 1px solid #ccc;
            height: 20px;
        }

    </style>
</head>
<body ng-controller="siteCtrl">
<table border="1" cellpadding="0" cellspacing="0" class="cc" >
    <tr>
        <td>组</td>
        <td>组下项</td>
    </tr>
    <tr ng-repeat="item1 in dataList">
        <td>
            <input type="checkbox" ng-model="item1.ProState" ng-click="selectItem(item1)">
            {{item1.ProList}}
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr ng-repeat="item in item1.data track by $index">
                    <td><input type="checkbox" ng-model="item.state" name="state" ng-change="select(item1)" ng-checked="item.state"></td>
                    <td>{{item.Name}}</td>
                    <td>{{item.Url}}</td>
                    <td>{{item.Email}}</td>
                    <td><button ng-click="add(item1,$index)">增加</button></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!--<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>-->
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('siteCtrl',function ($scope,$http) {

        $scope.dataList =[
            {
                "ProList":"a1",
                "ProName":"g1",
                "ProState":false,
                "data" :[
                    {
                        "Name":"johna11",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":true,
                        "ProName":"g1"
                    },
                    {
                        "Name":"johna12",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g1"
                    },
                    {
                        "Name":"johna13",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g1"
                    }
                ]
            },
            {
                "ProList":"a2",
                "ProName":"g2",
                "ProState":false,
                "data":[
                    {
                        "Name":"johna21",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g2"
                    },
                    {
                        "Name":"johna22",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g2"
                    },
                    {
                        "Name":"johna23",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g2"
                    }
                ]
            },
            {
                "ProList":"a3",
                "ProName":"g3",
                "ProState":false,
                "data":[
                    {
                        "Name":"johna31",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g3"
                    },
                    {
                        "Name":"johna32",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g3"
                    },
                    {
                        "Name":"johna33",
                        "Url":"ImJohn.cn",
                        "Email":"go",
                        "state":false,
                        "ProName":"g3"
                    }
                ]
            }
        ];

        angular.extend($scope,{
            selectItem: function (vf) {
                console.log(vf.ProState);
                angular.forEach(vf.data, function (data) {
                    data.state = !vf.ProState;
                })
            },
            select: function (items) {
                items.ProState = items.data.every(function (item) {
                    return item.state
                })
            },
            add: function (items,index) {
                console.log(items.data[index]);
                items.data.splice(index+1,0,items.data[index])
            }
        });
    });
</script>
</body>
</html>

尽量别写循环套循环，费运行时间～

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取