Question

我的html页面中有一个表单：

<div id=update>
        <form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
                <h3>Update Company</h3>
            <div class="form-group">

                <input type="text"
                    class="form-control" id="companyId"  value={{company.companyId}}  readonly/>
            </div>

            <div class="form-group">

                <input type="text"
                    class="form-control" id="companyName"
                     value={{company.companyName}} readonly/>

            </div>
            <div class="form-group">

                <input type="text"
                    class="form-control" id="companyPassword"
                     placeholder="Enter New Password" ng-model="company.newPassword"/>

            </div>
            <div class="form-group">

                <input type="email"
                    class="form-control" id="companyEmail" placeholder="Enter New Email"
                    ng-model="company.newEmail" />
                    <button type="submit" class="btn btn-default">UPDATE</button>
            </div>
        </form>
</div>

我想显示当前的公司价值（身份证，姓名，密码，电子邮件），在文本字段中，提供用户选项来更改密码和电子邮件，并在我提交表单时发送所有参数。

问题是当我将ng-model放在文本字段上时，当前值消失了。我需要修复一下!!!

在前两个字段中，我现在看到了值，因为我没有ng-model，一旦我将ng-model消失了。

Answer 1

在您的控制器中，只需将公司数据附加到以下范围：

$scope.company = yourcompanydata

至于提交数据，您不必列出html中的所有参数。在您的HTML中，请离开：

ng-submit="updateCompany()"

在你的控制器中：

$scope.updateCompany = function(){
  // your submitting logic here and all the company data will
  // be available under $scope.company
  // including the new password and email entered by the user

  // so your submitting logic could look something like this:
  submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}

Answer 2

这是一个简单的版本codepen，可以帮助您入门，具体取决于您对数据后缀的处理方式。我可以根据需要更新。

angular
  .module('app', [])
  .controller('ExampleController', ExampleController);

function ExampleController() {
  var vm = this;
  vm.company = {};
  vm.info = info;

  function info(info) {
    console.log(info);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='app'>
  <div class="container" ng-controller="ExampleController as vm">
    <form novalidate>
      <input type="text" ng-model="vm.company.name" required/>
      <input type="email" ng-model="vm.company.email" required/>
      <input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
    </form>
    {{vm.company| json}}
  </div>
</body>

表格angularjs如何在添加ng-model时显示当前状态

2 个答案: