Get checked CheckBox rows and store in array variable in AngularJS

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);
    }
}