如何从HTML页面中的用户显示中获取输入

How to get input from user display in HTML page

本文关键字：用户 获取 输入 显示 HTML      更新时间：2023-10-29

我遇到了一个将用户的输入显示到此表中的问题。

<tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false">
                <td>
                    <div> {{user.username}} </div>
                </td>
                <td>
                    <div> {{user.name}} </div>
                </td>
 </tr>

如果用户单击此"编辑用户"按钮，表单将出现。

 <div class="glyphicon glyphicon-lock" ng-click="editUser();">

这是一个要求用户填写并编辑其用户名和名称的表单

  <div class="dialog-contents">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Edit User</h4>
    </div>
    <!-- Modal Body -->
    <div class="modal-body">
        <form name="edituser">
            <div class="form-group has-feedback" ng-class="editUser.username.$valid ? 'has-success' : 'has-error';">
                <label class="col-sm-2 control-label" for="Username">Username</label>
                <div class="col-sm-10">
                <input type="username" ng-model="user.username" class="form-control" id="Username" placeholder="Enter Username"/>
                </div>
                <span class="glyphicon form-control-feedback"
                      ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
            </div>
            <div class="form-group has-feedback" ng-class="editUser.name.$valid ? 'has-success' : 'has-error';">
                <label class="col-sm-2 control-label" for="Name">Name</label>
                <div class="col-sm-10">
                <input type="name" ng-model="user.name" class="form-control" id="name" placeholder="Enter Name"/>
                </div>
                <span class="glyphicon form-control-feedback"
                      ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
            </div>

在这个表单中，如果用户点击这个"提交"按钮，当我提供上面的代码时，用户详细信息将出现在表中。

<button type="submit" class="btn btn-primary" ng-click="add();"
                ng-class="isLoading ? 'disabled' : '';">Submit </button>

现在，我想推送用户的输入，并将其显示在表中。但我一直在开发控制器来获取输入并显示它。如果有人能帮助解决这个问题，我将不胜感激。

 app.register('user', ['$scope', 'ngDialog', function ($scope, $dialog) {
$scope.isLoading = false;
$scope.addUser = function(){
    $dialog.open({
            showClose: false,
            closeByEscape: true,
            template: 'view/user/user-user-add.html',
            controller: ['$scope', function ($dialogScope) {
                $dialogScope.users = {
                    username : "" ,
                    name : "",
                    status : "",
                }
                .closePromise.then(function (data) 
                $dialogScope.hasError = false;
                $dialogScope.errorMessage = '';
                $dialogScope.add=function(){
                    $dialogScope.closeThisDialog({username:"xxx"});
                }
            }]
        });
    };
 }]);

在添加函数中，关闭对话框并传递新的用户对象以关闭promise，如下所示：-

//your dialog controller
$dialogScope.add=function(){
    $dialogScope.closeThisDialog({username:"xxx"});
};

您的主控制器：-

$scope.addUser = function(){
  $dialog.open({
        ....
    })
  .closePromise.then(function (data) {
      console.log(data); 
      //check and find user from the data and do what you need, i.e. $scope.users.push(user);
   });
};
相关文章：