search

Home  >  Q&A  >  body text

angular.js - How to write a table with select all, inverse selection, add or delete single row and single column in angular?

How to write a table in angular with select all, inverse selection, add, delete, single row and single column? And there can be an array containing the data of the selected item without using jq

迷茫迷茫2826 days ago659

reply all(1)I'll reply

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 16:52:17

    <!DOCTYPE html>
    <html lang="en" >

    <head>

    <title>Document</title>
    <script src="angular.js"></script>
    <script src="checklist.js"></script>
    <script src="app.js"></script>
    </head>

    <body>

    <input type="checkbox" ng-checked="user.roles.length == roles.length" ng-click="checkAll()" >全选/反选


    <input type="checkbox" checklist-model="user.roles" checklist-value="role" > {{role.text}}



        <br>
        <br> user.roles {{ user.roles}}<br>
        <br> role.id {{ids}}<br>
        <button class="right radius reveal-button" ng-click="del()">删除</button>
    </p>
    

    </body>

    </html>

    var app = angular.module("app", ["checklist-model"]);

    app.controller('Ctrl', function($scope) {
    $scope.roles = [
    {id: 1, text: 'guest'},
    {id: 2, text: 'user'},
    {id: 3, text: 'customer'},
    {id: 4, text: 'admin'}
    ];
    $scope.ids = [];
    //选择的结果集合
    $scope.user = {
    roles: []
    };

    $scope.checkAll = function() {
    console.log($scope.user.roles.length == $scope.roles.length)
    if($scope.user.roles.length == $scope.roles.length){
    $scope.user.roles = [];
    $scope.ids = [];
    }else{
    $scope.user.roles = angular.copy($scope.roles);
    $scope.ids = [];
    }

    };
    $scope.del =function(){
    for(x in $scope.user.roles){
    $scope.ids.push($scope.user.roles[x].id);
    }

    console.log($scope.ids)
    };

    });

    reply
    0
  • Cancelreply