角度形式 ng-repeat 删除单个形式

Question

我正在使用 ng-repeat 处理动态表单。我正在根据我的用户 ID 获取动态表单。每个表格都有删除按钮。我的要求是，一旦我单击删除按钮，我需要从我的用户 obj 中删除该特定表单和那些值，以及我需要发送到服务器的剩余值。在这个例子中，我想删除 id 2（第 2 种形式），第 1 种和第 2 种形式的数据我需要存储一个变量。 请为此发送一些小提琴。

我的html代码

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="user in users">
                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>

                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Location</label>

                        <select ng-model="user.location" ng-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>

                        </select>
                    </div>
                    <div>
                        <button>delete</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="buttonContainer text-center btn-container">
            <br>
            <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>

</div>

js文件

var myApp = angular.module('myApp', []);
 myApp.controller('myCtrl', function($scope, $timeout) {
$scope.ids = [1, 2, 3];
$scope.users = $scope.ids.map(function(id) {
    return {
        id: id,
        comment: "",
        location: ""
    };
});
$scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
$scope.initLocation = (user) => {
    $timeout(() => {
        user.location = $scope.locations[0];
    });
}
$scope.adduser = function() {
    var data = $scope.users.map(function(user) {
        return {
            "userid": user.id,
            "manualcomment": user.comment,
            "location": user.location
        }
    });

    console.log("data", data)
}

 });

Answer 1

根据您的要求，我正在添加 ng-click 以删除按钮并添加 removeSelForm 方法并将您的用户对象传递给该函数参数。在控制器中，我正在从用户对象中删除特定的表单值。

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope, $timeout) {
    $scope.ids = [1, 2, 3];
    $scope.users = $scope.ids.map(function(id) {
        return {
            id: id,
            comment: "",
            location: ""
        };
    });
    $scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
    $scope.initLocation = (user) => {
        $timeout(() => {
            user.location = $scope.locations[0];
        });
    }
    $scope.removeSelForm = function(item) {
        var index = $scope.users.indexOf(item)
        $scope.users.splice(index, 1);

    }
    $scope.adduser = function() {
        var data = $scope.users.map(function(user) {
            return {
                "userid": user.id,
                "manualcomment": user.comment,
                "location": user.location
            }
        });

        console.log("data", data)
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <form role="form" name='userForm' novalidate>
            <div class="container">
                <div class="row" ng-repeat="user in users">
                    <div class="form-group">
                        <div class="col-md-3">
                            <label>ID</label>
                            <input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
                        </div>

                        <div class="col-md-3">
                            <label>Comments</label>
                            <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
                        </div>

                        <div class="col-md-3 ">
                            <label>Location</label>

                            <select ng-model="user.location" ng-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>

                            </select>
                        </div>
                        <div>
                            <button ng-click="removeSelForm(user)">delete</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="buttonContainer text-center btn-container">
                <br>
                <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
                <button type="button" class="btn button--default btn--small pull-center">Close</button>
            </div>
        </form>

    </div>