Question

我写了一个添加用户的html文件，它还有一个编辑和删除用户按钮点击添加用户按钮我正在使用bootstrap所以有一个弹出窗体菜单，询问有关用户现在我想填充的详细信息用户单击“编辑”按钮时的相同弹出窗体菜单

我编写了以下代码但是如何填充表单值这适用于java脚本和

  $scope.editUser = function (user) {
            var modalInstance = $modal.open({
                templateUrl: 'edit-form.html',
                controller: editModalInstance,
                scope: $scope,
                resolve: {
                    editForm: function () {
                        return $scope.editForm;
                    }
                }
            });
            modalInstance.result.then(function (selectedItem) {
                user.firstname = selectedItem.firstname;
                user.lastname = selectedItem.lastname;
                user.pno = selectedItem.pno;
                user.emailid = selectedItem.emailid;
                $scope.selected = 'closed';
            });
        };


var editModalInstance = function ($scope, $modalInstance) {
    $scope.form = {};
    $scope.submitForm = function () {
        if ($scope.form.editForm.$valid) {
            $modalInstance.close($scope.form);
        }
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

模板网址： -

`

    <div class="form-group">
        <label>First Name</label>
        <input class="form-control" type="text" name="firstname" ng-model="form.firstname" ng-required="true" value="$scope.user.firstname">
        <div ng-show="form.editForm.firstname.$dirty && form.editForm.firstname.$invalid">
            <small>Invalid First Name</small>
        </div>
    </div>

`

那么我如何使用表单字段中的值，以便在单击用户的编辑按钮时将值放在各自的表单字段中

Answer 1

请检查以下代码

var app = angular.module("myApp", ['ui.bootstrap']);

app.controller('myController', function ($scope, $uibModal) {
  'use strict';
   $scope.users = [
            {
                firstname: 'Bad',
                lastname: 'man',
                pno: 123456789,
                emailid: 'badman@123.com'
            }];
   $scope.removeUser = function (user) {
            var removedUser = $scope.users.indexOf(user);
            $scope.users.splice(removedUser, 1);
        };
   $scope.openModal = function () {
    $uibModal.open({
      templateUrl: 'modal.html',
      controller: function ($scope, $uibModalInstance) {
        $scope.ok = function () {
          $uibModalInstance.close();
        };

        $scope.cancel = function () {
          $uibModalInstance.dismiss('cancel');
        };
      }
    })
  };
   $scope.editUser = function (user) {
            var modalInstance = $uibModal.open({
                templateUrl: 'edit-form.html',
                controller: 'editModalInstance',
                scope: $scope,

                resolve: {
                    editForm: function () {
                        return user;
                    }
                }
            });
            modalInstance.result.then(function (selectedItem) {
                user.firstname = selectedItem.firstname;
                user.lastname = selectedItem.lastname;
                user.pno = selectedItem.pno;
                user.emailid = selectedItem.emailid;
                $scope.selected = 'closed';
            });
        };


        $scope.showForm = function () {

            var modalInstance = $uibModal.open({
                templateUrl: 'form.html',
                controller: 'ModalInstanceCtrl',
                scope: $scope,
                resolve: {
                    userForm: function () {
                        return $scope.userForm;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
                if (selectedItem === 'error') {
                    alert('There is already a user with the email id.Try with a new one.' +
                        '');
                }
            });
        };
});



app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance,userForm) {
    $scope.form = {};
    $scope.submitForm = function () {
        if ($scope.form.userForm.$valid) {
            var push_into = 1;
            for (var index = 0; index < $scope.users.length; index++) {
                if ($scope.users[index].emailid === $scope.form.emailid) {
                    push_into = 0;
                    break;
                }
            }
            if (push_into) {
                $scope.users.push({
                    firstname: $scope.form.firstname,
                    lastname: $scope.form.lastname,
                    pno: $scope.form.pno,
                    emailid: $scope.form.emailid,
                });
                $uibModalInstance.close('closed');

            }
            else {
                $uibModalInstance.close('error');

            }
        }
    };
    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});
app.controller('editModalInstance', function ($scope, $uibModalInstance,editForm) {
     $scope.form = {};
     $scope.form=editForm;


    $scope.submitForm = function () {
        if ($scope.form.editForm.$valid) {
            $uibModalInstance.close($scope.form);
        }
    };
    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

同时检查plunkr以供参考：

https://plnkr.co/edit/gt7FS4DNRjwLVyFOCZqx?p=preview

Answer 2

我在我的项目中使用过此功能。您只需在获得编辑响应时在$ scope中定义相同的变量即可。

让我们关注我： 1.假设您有两个输入字段，一个用于'name'，另一个用于'lastname'。您要求用户输入详细信息并由用户填写。

    First Name: <input type="text" ng-model="firstName">
    Last Name: <input type="text" ng-model="lastName">

当您使用ANGULAR时，您将从ng-model中获取值并提交表单并保存详细信息。

现在当您点击编辑按钮时，显然您必须匹配任何ID或键[以匹配我们要编辑的用户]。
通过匹配令牌[表示姓名和姓氏]来获取所有详细信息。

现在你只需要定义预键合变量[即ng-model]

function edit(){
//Any request to server and result of user in response
$scope.firstname=response.firstname;
$scope.lastname=response.lastname;[or whatever you are retrieving]
}

5.现在它会自动填写表格，并从您的回复中获取详细信息，您可以轻松编辑您想要的任何内容。看看演示。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="hello" ng-controller="editUser">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('hello', []);
app.controller('editUser', function($scope) {
    $scope.firstName = "MY mane is";
    $scope.lastName = "Aryan";
});
</script>

</body>
</html>

Hope this helps you I can explain further if you need.

如何使用angularjs将现有控制器中的值填充/获取到表单字段中

2 个答案: