как заполнить / получить значения из существующего контроллера в поле формы, используя angularjs

Question

я написал html-файл, который добавляет пользователей, а также имеет кнопку редактирования и удаления пользователя при нажатии кнопки добавления пользователя. Я использую загрузчик, поэтому есть всплывающее меню, которое запрашивает подробную информацию о пользователе, и теперь я хочу заполнить его.то же самое всплывающее меню, когда пользователь нажимает кнопку редактирования

Я написал следующий код, но как мне заполнить значение формы Это для сценария 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');
    };
};

Шаблон URL: -

`

    <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. Предположим, у вас есть два поля ввода, одно для «имени» и одно для «фамилии».Вы просили пользователя ввести данные, а пользователь заполняет их.

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

Поскольку вы используете ANGULAR, вы получаете значения из ng-модели, отправляете форму и сохраняете детали.

Теперь, когда вы нажимаете кнопку редактирования, становится очевидным, что вы должны сопоставить любой идентификатор или ключ [для соответствия тому, какого пользователя мы хотим редактировать]. вы получите все детали, сопоставив маркер [означает имя ифамилия].

теперь вам просто нужно определить предварительно связанные переменные [т.е. в ng-модели]

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.