我写了一个添加用户的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>
`
那么我如何使用表单字段中的值，以便在单击用户的编辑按钮时将值放在各自的表单字段中
答案 0 :(得分：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以供参考：
答案 1 :(得分：0)
我在我的项目中使用过此功能。您只需在获得编辑响应时在$ scope中定义相同的变量即可。
让我们关注我： 1.假设您有两个输入字段，一个用于'name'，另一个用于'lastname'。您要求用户输入详细信息并由用户填写。
First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">
当您使用ANGULAR时，您将从ng-model中获取值并提交表单并保存详细信息。
现在你只需要定义预键合变量[即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.