Get checked CheckBox rows and store in array variable in AngularJS

Last Reply 21 days ago By dharmendr

Posted 22 days ago

after clicking of taxes pop up it can display id ,chekcbox and value textboxes i want to save only selected check box values to above row for n no of rows i can do like this

before clicking of add function in taxes we have some values on popup

i want to save only selected checkbox values to above row

CREATE TABLE [dbo].[AutoPopList](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [value] [numeric](18, 0) NULL
) ON [PRIMARY]
GO
public JsonResult getAll1()
{
    List<AutoPopList> Emp = db.AutoPopLists.ToList();
    return Json(Emp, JsonRequestBehavior.AllowGet);
}
@{
    Layout = null;
}

<html>
<head>
    <title></title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window, RegistrationService) {
            //Loads all Employee records when page loads
            loadEmployees();
            function loadEmployees() {
                var EmployeeRecords = RegistrationService.gettaxes();
                EmployeeRecords.then(function (d) {
                    //success
                    $scope.taxes = d.data;
                },
                function () {
                    alert("Error occured while fetching employee list...");
                });
            }
            $scope.Customers = [];
            $scope.taxes = [];
            $scope.Add = function () {
                loadEmployees();
                //Add the new item to the Array.
                var customer = {};
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                customer.taxes = $scope.taxes;
                $scope.Customers.push(customer);
                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };

        app.service("RegistrationService", function ($http) {
            //get All taxes
            this.gettaxes = function () {
                return $http.get("/dynamicaalyaddremove/getAll1");
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th>taxes</th>
                <th>&nbsp;</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.Name}}"</td>
                    <td>{{m.Country}}</td>
                    @*<td value="{{m.subitems}}"><button type="button"   data-ng-model="subitems"  data-toggle="modal" data-target="#popup">Click</button></td>*@

                    <td value="{{m.subitems1}}">
                        <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                            View Orders
                        </button>
                        <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" ng-click="clicked=false">
                                            ×
                                        </button>
                                        <h4 class="modal-title">
                                            Order Details
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <table class="table table-condensed">
                                            <thead>
                                                <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                    <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                                                        id
                                                    </th>
                                                    <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                        Value
                                                    </th>
                                                    <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                        Action
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody ng-repeat="o in m.taxes">
                                                <tr>
                                                    <td>
                                                        {{o.id}}
                                                    </td>

                                                    <td>
                                                        <span ng-show="editOrder != true">{{o.value}}</span>
                                                        <input ng-show="editOrder" type="text" ng-model="o.value" class="form-control" />
                                                    </td>


                                                    <td>
                                                        <button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
                                                                id="Button1" ng-click="editOrder = true; EditOrder(o)">
                                                            <i class="fa fa-fw fa-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
                                                            <i class="fa fa-save"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                            Ok
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>

                    <td>
                        <input type="button" ng-click="Remove($index)" value="Remove" />

                    </td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><input type="text" ng-model="Country" /></td>

                    <td><button type="button" ng-model="subitems1" data-toggle="modal" data-target="#popup1">Click</button></td>

                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
        <div class="modal fade" id="popup1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <div class="s2vk-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="panel panel-default">
                                        <table class="table table-condensed">
                                            <thead>
                                                <tr style="padding-left:10px; padding-right:10px;" class="active">
                                                    <th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">Id</th>
                                                    <th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">Checkbox</th>

                                                    <th style="padding-left:10px; padding-right:10px;" class="thick-line">Value</th>
                                                    <th style="padding-left:10px; padding-right:10px;" class="thick-line">Action</th>

                                                    
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr style="padding-left:20px; padding-right:20px;" ng-model="myData3" ng-repeat="subitem in taxes">
                                                    <td>{{subitem.id}}</td>
                                                    <td><input type="checkbox" name="vehicle1" ng-model="checkbox" >
                                            </td>
                                                    <td>
                                                        <span ng-show="editOrder != true">{{subitem.value}}</span>
                                                        <input ng-show="editOrder" type="text" ng-model="subitem.value" class="form-control" />
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
                                                                id="Button1" ng-click="editOrder = true; EditOrder(subitem)">
                                                            <i class="fa fa-fw fa-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
                                                            <i class="fa fa-save"></i>
                                                        </button>
                                                    </td>
                                                    
                                                </tr>
                                            </tbody>
                                            
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

Posted 21 days ago Modified on 21 days ago

Hi mahesh213,

For this you need to use ng-click event for the CheckBox and pass index parameter and in JavaScript retrive values from taxes array and insert into another array as per the index parameter. Then use the newly created taxes array to the Customers scope.

Check the below code.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window, RegistrationService) {
        //Loads all Employee records when page loads
        loadEmployees();

        function loadEmployees() {
            var EmployeeRecords = RegistrationService.gettaxes();
            EmployeeRecords.then(function (d) {
                $scope.taxes = d.data;
            },
            function () {
                alert("Error occured while fetching employee list...");
            });
        }
        $scope.Customers = [];
        $scope.taxes = [];
        $scope.newtaxes = [];
        $scope.change = function (i) {
            if ($(this)[0].checkbox) {
                $scope.newtaxes.push($scope.taxes[i]);
            }
            else {
                $scope.newtaxes.pop($scope.taxes[i]);
            }
        };
        $scope.Add = function () {
            loadEmployees();
            //Add the new item to the Array.
            var customer = {};
            customer.Name = $scope.Name;
            customer.Country = $scope.Country;
            customer.taxes = $scope.newtaxes;
            $scope.Customers.push(customer);
            //Clear the TextBoxes.
            $scope.Name = "";
            $scope.Country = "";
            $scope.newtaxes = [];
        };
        $scope.Remove = function (index) {
            //Find the record using Index from Array.
            var name = $scope.Customers[index].Name;
            if ($window.confirm("Do you want to delete: " + name)) {
                //Remove the item from Array using Index.
                $scope.Customers.splice(index, 1);
            }
        }
        $scope.remove1 = function (index) {
            var name = $scope.Orders[index].OrderId;
            if ($window.confirm("Do you want to delete: " + name)) {
                $scope.Orders.splice(index, 1);
            }
        }
        $scope.EditCustomer = function (data) {
            $scope.editing = true;
            $scope.selected = angular.copy(data);
        };
        $scope.SaveCustomer = function (id) {
            $scope.editing = false;
            $scope.Value[id] = angular.copy($scope.selected);
        };
    });
    app.service("RegistrationService", function ($http) {
        //get All taxes
        this.gettaxes = function () {
            return $http.get("/Home/getAll1");
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>
                Name
            </th>
            <th>
                Country
            </th>
            <th>
                taxes
            </th>
            <th>
                &nbsp;
            </th>
        </tr>
        <tbody ng-repeat="m in Customers">
            <tr>
                <td>
                    {{m.Name}}
                </td>
                <td>
                    {{m.Country}}
                </td>
                <td value="{{m.subitems1}}">
                    <button type="button" class="btn btn-primary" ng-init="clicked=false" ng-click="clicked=!clicked">
                        View Orders
                    </button>
                    <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="clicked">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" ng-click="clicked=false">
                                        ×
                                    </button>
                                    <h4 class="modal-title">
                                        Order Details
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                                                    id
                                                </th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    Value
                                                </th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    Action
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody ng-repeat="o in m.taxes">
                                            <tr>
                                                <td>
                                                    {{o.id}}
                                                </td>
                                                <td>
                                                    <span ng-show="editOrder != true">{{o.value}}</span>
                                                    <input ng-show="editOrder" type="text" ng-model="o.value" class="form-control" />
                                                </td>
                                                <td>
                                                    <button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
                                                        id="Button1" ng-click="editOrder = true; EditOrder(o)">
                                                        <i class="fa fa-fw fa-pencil"></i>
                                                    </button>
                                                    <button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
                                                        <i class="fa fa-save"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" ng-click="clicked=false">
                                        Ok
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <input type="button" ng-click="Remove($index)" value="Remove" />
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <input type="text" ng-model="Name" />
                </td>
                <td>
                    <input type="text" ng-model="Country" />
                </td>
                <td>
                    <button type="button" ng-model="subitems1" data-toggle="modal" data-target="#popup1">
                        Click</button>
                </td>
                <td>
                    <input type="button" ng-click="Add()" value="Add" />
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="modal fade" id="popup1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        ×</button>
                    <h4 class="modal-title">
                        Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div class="s2vk-container">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="panel panel-default">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                                                    Id
                                                </th>
                                                <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                                                    Checkbox
                                                </th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    Value
                                                </th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    Action
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData3" ng-repeat="subitem in taxes">
                                                <td>
                                                    {{subitem.id}}
                                                </td>
                                                <td>
                                                    <input type="checkbox" name="vehicle1" ng-model="checkbox" ng-click="change($index)" />
                                                </td>
                                                <td>
                                                    <span ng-show="editOrder != true">{{subitem.value}}</span>
                                                    <input ng-show="editOrder" type="text" ng-model="subitem.value" class="form-control" />
                                                </td>
                                                <td>
                                                    <button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
                                                        id="Button1" ng-click="editOrder = true; EditOrder(subitem)">
                                                        <i class="fa fa-fw fa-pencil"></i>
                                                    </button>
                                                    <button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
                                                        <i class="fa fa-save"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

Controller

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }
    public JsonResult getAll1()
    {
        TestEntities db = new TestEntities();
        List<AutoPopList> Emp = db.AutoPopLists.ToList();
        return Json(Emp, JsonRequestBehavior.AllowGet);
    }
}