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

时间:2016-04-01 02:37:40

标签: javascript html angularjs

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

<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>

如果用户点击这个&#34;编辑用户&#34;按钮,表格将出现。

 <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>

请填写此表单,如果用户点击此处&#34;提交&#34;按钮,用户详细信息将显示在表格中,因为我提供上面的代码。

<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"});
                }
            }]
        });
    };
 }]);

1 个答案:

答案 0 :(得分:0)

在你的add函数中,关闭对话框并传递新用户对象以关闭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);
   });
};