執行效果如下（利用了AngularJS的雙向繫結進行修改）：

原始碼如下：

@{
    ViewBag.Title = "Index";
}
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
<script type="text/javascript">

        var myApp = angular.module("myApp", []);
        myApp.controller('mtController', function ($scope) {
            $scope.datas = [
                {
                    id:1,
                    name: "張三",
                    age: 23,
                    account: "1101",
                    pass: "123",
                    sex: "男"
                }, {
                    id:2,
                    name: "李四",
                    age: 22,
                    account: "1102",
                    pass: "123",
                    sex: "男"
                }, {
                    id:3,
                    name: "張三",
                    age: 24,
                    account: "1103",
                    pass: "123",
                    sex: "男"
                }
            ];

            //增加資料的方法
            $scope.addUser = function () {

                var flag1 = false;
                //校驗使用者名稱
                if ($scope.userName == "" || $scope.userName == null) {
                    flag1 = false;
                    alert("userName不能為空")

                    return;
                } else {
                    flag1 = true;
                }
                //校驗使用者年齡
                if ($scope.userAge == "" || $scope.userAge == null) {
                    flag1 = false;
                    alert("userAge不能為空")
                    return;
                } else if (isNaN($scope.userAge)) {  //如果傳入的引數是非數字返回true,如果是數字返回false
                    flag1 = false;
                    alert("userAge必須是數字")
                    return;
                } else {
                    flag1 = true;
                }
                //校驗使用者賬號
                if ($scope.userAccount == "" || $scope.userAccount == null) {
                    flag1 = false;
                    alert("userAccount不能為空")
                    return;
                } else {
                    flag1 = true;
                }
                //校驗使用者密碼
                if ($scope.userPass == "" || $scope.userPass == null) {
                    flag1 = false;
                    alert("userPass不能為空")
                    return;
                } else {
                    flag1 = true;
                }
                //校驗性別
                let sex = document.getElementsByName("sex");
                var flags = false;
                for (var i = 0; i < sex.length; i++) {
                    if (sex[i].checked == true) {
                        if (i == 0) {
                            $scope.sexName = "男";
                        }
                        if (i == 1) {
                            $scope.sexName = "女";
                        }
                        flags = true;
                    }
                }
                if (flags == false) {
                    flag1 = false;
                    alert("userSex不能為空")
                    return;
                } else {
                    flag1 = true;
                }
                
                //如果條件都滿足，即flag1為true,就新增資料到原始的集合裡面
                if (flag1) {                   
                    $scope.datas.push({
                        id:$scope.datas.length+1,
                        name: $scope.userName,
                        age: $scope.userAge,
                        account: $scope.userAccount,
                        pass: $scope.userPass,
                        sex:$scope.sexName
                    });
                }

            }

            //點選更新按鈕將表單顯示
            var updateIndex = 0;
            $scope.showUpadateForm = function (index) {
                updateIndex = index;
                $scope.updateForm = true;
                for (var i = 0; i < $scope.datas.length; i++) {
                    if ($scope.datas[i].id == index + 1) {
                        //alert(index)
                        $scope.updateUser = $scope.datas[i];
                        break;
                    }
                }
            }

            //取消修改，關閉修改表單的顯示cancelUpdateUser
            $scope.cancelUpdateUser = function () {
                $scope.updateForm = false;
            }

            //刪除使用者
            $scope.deleteUser = function (index) {
                $scope.datas.splice(index, 1);
            }
        });

</script>
<h1>AngularJS增刪改操作</h1>
<div ng-app="myApp" ng-controller="mtController">
    <table border="2px" cellspacing="0">
        <tr>
            <td>序號</td>
            <td>使用者名稱</td>
            <td>使用者年齡</td>
            <td>使用者賬號</td>
            <td>使用者密碼</td>
            <td>性別</td>
            <td>操作</td>
        </tr>
        <tr ng-repeat="x in datas">
            <td>{{x.id}}</td>
            <td>{{x.name}}</td>
            <td>{{x.age}}</td>
            <td>{{x.account}}</td>
            <td>{{x.pass}}</td>
            <td>{{x.sex}}</td>
            <td>
                <button ng-click="showUpadateForm($index)">修改</button>
                <button ng-click="deleteUser($index)">刪除</button>
            </td>
        </tr>
        
    </table>
   
    <form style="border: 1px solid yellow; width: 260px;">
        使用者名稱<input type="text" placeholder="請輸入使用者名稱" ng-model="userName"/>
              <br />
        使用者年齡<input type="text" ng-model="userAge"/>
                <br />
        使用者賬號<input type="text" ng-model="userAccount"/>
                <br />
        使用者密碼<input type="text" ng-model="userPass"/>
                <br />
        性別@*<input type="text" ng-model="userSex"/>*@
            <input type="radio" name="sex" value="male" id="sex1" />男
            <input type="radio" name="sex" value="female" id="sex2" />女<br />
        @*<button ng-click="addUser()">新增</button>*@
        <input type="button" value="新增" ng-click="addUser()"/>
        <input type="reset" value="重置" />
    </form>

    @*ng-show 指令在表示式為 true 時顯示指定的 HTML 元素，否則隱藏指定的 HTML 元素*@
    <form style="border: 1px solid yellow; width: 260px;" ng-show="updateForm">
        使用者名稱<input type="text" placeholder="請輸入使用者名稱" ng-model="updateUser.name" /><!--updateUserName-->
        <br />
        使用者年齡<input type="text" ng-model="updateUser.age" /><!--updateUserAge-->
        <br />
        使用者賬號<input type="text" ng-model="updateUser.account" /><!--updateUserAccount-->
        <br />
        使用者密碼<input type="text" ng-model="updateUser.pass" /><!--updateUserPass-->
        <br />
        性別 <input type="radio" name="updateSex" value="male" id="updateSex1" />男
             <input type="radio" name="updateSex" value="female" id="updateSex2" />女<br />
        <input type="button" value="關閉" ng-click="cancelUpdateUser()" />
        <input type="reset" value="重置" />
    </form>
</div>
   
    


 

在點選修改按鈕後彈出的表單中，關於性別的修改還可以繼續優化，此處如果想要進一步完善可參照新增使用者功能中的性別校驗進行完善。