How to add dynamically html controls through the Angular Js in Asp.Net MVC Project?

Question

How to add dynamically html controls through the Angular Js in Asp.NetMVC Project?

just like-i want to add multiple bank details of employee on add button click.
and how can i remove wrong bank details on other remove button click.

Answer 1

To add dynamically bank details page controls through angular js

Step 1: first of all create html page like below code.

Bank.cshtml page

 <form class="form-horizontal" enctype="multipart/form-data">
        <div ng-repeat="item in ArrBankCtrls">
            <div class="form-group">
                <label ng-model="item.bankPK_Id" hidden></label>
                <label for="BankName" class="col-sm-2 control-label">Bank <i class="mandatStarColor">*</i></label>
                <div class="col-sm-6">
                    <select class="form-control" style="width: 100%;" ng-change="ChangeBankName()" ng-model="item.BankName">
                        <option selected="selected">--Select Bank--</option>
                        <option ng-repeat="item in bankName" value="{{item.Value}}">{{item.Text}}</option>
                    </select>
                    <span style="color:red;" ng-show="item.requiredBankName">BankName is required !</span>
                </div>
                <div class="col-sm-2">
                    <button id="Add" class="btn btn-success" title="Add" ng-click="AddRemoveBank(true,item)">+</button>
                    <button class="btn btn-danger" ng-model="RemoveBankCtrl" ng-disabled="RemoveBankCtrl" title="Remove" ng-click="AddRemoveBank(false,item)">-</button>
                </div>
            </div>
            <div class="form-group">
                <label for="AccountNo" class="col-sm-2 control-label">A/c No. <i class="mandatStarColor">*</i></label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" onlydigits ng-change="ChangeAccountNo($index)" ng-model="item.AccountNo" placeholder="Account No." maxlength="26" required>
                    <span style="color:red;" ng-show="item.requiredAccountNo">AccountNo is required !</span>
                </div>
            </div>
            <div class="form-group">
                <label for="IFSC" class="col-sm-2 control-label">IFSC <i class="mandatStarColor">*</i></label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" ng-change="ChangeIFSC($index)" ng-model="item.IFSC" placeholder="IFSC" maxlength="11" required>
                    <span style="color:red;" ng-show="item.requiredIFSC">IFSC is required !</span>
                    <span style="color:red;" ng-show="item.requiredDigitIFSC">Required 11 digit's !</span>
                </div>
            </div>
            <div class="form-group">
                <label for="Address" class="col-sm-2 control-label">Address</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" ng-model="item.Address" placeholder="Address">
                </div>
            </div>
            <div class="form-group">
                <label for="CancelCheque" class="col-sm-2 control-label">Cancel Cheque <i class="mandatStarColor">*</i></label>
                <div class="col-sm-6">
                    <input type="file" id="{{ 'CancelCheque-' + this.$index }}" ng-file-select="onFileSelect($files)" onchange="angular.element(this).scope().BankFileChange(this)" ng-model="item.ImgCancelCheque" upload-file="item.CancelCheque" accept=".pdf,.gif,.jpg,.jpeg,.png,.bmp">
                    <span style="color:red;" ng-show="item.requiredCancelCheque">CancelCheque file is required !</span>
                    <img src="{{item.ImgCancelCheque}}" alt="Cancel Cheque" class="imgHeightWidth" />
                </div>
            </div>
        </div>
    </form>

Angular Js code

  //#region To Add/Remove BankDetails controls
    $scope.RemoveBankCtrl = true;
    $scope.ArrBankCtrls = [{
        PK_Id: "",
        BankName: "",
        AccountNo: "",
        IFSC: "",
        Address: "",
        CancelCheque: ""
    }];
    $scope.AddRemoveBank = function (flag, item) {
        //debugger
        var index = this.$index;
        if (flag) {
            item = { PK_Id: "", BankName: "", AccountNo: "", IFSC: "", Address: "", CancelCheque: "" };
            $scope.ArrBankCtrls.push(item);
            $scope.RemoveBankCtrl = false;

            //#region Set default selected value in ddl
            $scope.ArrBankCtrls[($scope.ArrBankCtrls.length - 1)].BankName = "--Select Bank--";
            // #endregion
        }
        else {
            //$scope.ArrBankCtrls.pop(item);
            $scope.ArrBankCtrls.splice(index, 1);
            if ($scope.ArrBankCtrls.length == 1) {
                $scope.RemoveBankCtrl = true;
            }
        }
    }

    //#region Bind Bank Name ddl
    $scope.ArrBankCtrls[0].BankName = "--Select Bank--";
    VendorService.postData(strVenUrl + "/GetBank").then(function (data) {
        if (data != null) {
            $scope.bankName = data;
        }
    })
    // #endregion

    // #endregion

Controller.cs Code

 #region GetBank

        public ActionResult GetBank()
        {
            dynamic bank = null;
            try
            {
                bank = vendor.Bank();
            }
            catch (Exception ex)
            {
                ExceptionError(ex.Message);
            }
            return Json(bank, JsonRequestBehavior.AllowGet);
        }

        #endregion


        [HttpPost]
        public ActionResult InsertBankDetails(List<BankDetails> bankDetails)
        {
            //Your code
            return RedirectToAction("BankDetails");
        }

Answer 2

you must have used somewhere collections, bind that collection in the ng-repeat directive, on the button click and add simply remove and add an item from the collection