形式angularjs如何顯示當前狀態，同時增加NG-模型

我有我的html頁面的表單：形式angularjs如何顯示當前狀態，同時增加NG-模型

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

我想顯示當前公司價值（ID，姓名，密碼，電子郵件），而不是讓用戶選擇更改密碼和電子郵件，並在提交表單時發送所有參數。

問題是，當我將ng-model放在文本字段上時，當前值消失。我需要一個修復！

在前兩個字段中，我現在看到了這個值，因爲我沒有ng-model這個值，一旦我把ng-model消失了。

來源

2016-05-13 Asaf.e

要麼使用NG-init或定義一些NG-模型這些領域，並將其設置爲任何你想要的顯示。 – yBrodsky

[AngularJS - 輸入文本框中的值屬性在使用ng模型時會被忽略？]（http://stackoverflow.com/questions/10610282/angularjs-value-attribute-on-an-put -text-box-is-ignored-when-is-a-ng-m） – Saad

我成功地將我的數據傳給了我的控制器中的$ scope.something，並且我可以在ng-model的文本字段中看到它，現在當用戶更改那些我想用submit =「」作爲參數發送它們的參數時，任何人都可以幫我解決這個問題嗎？ –

在你的控制器就在公司數據附加到的範圍是這樣的：

$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,...) 
}

來源

2016-05-13 17:03:14

感謝每一個機構！它現在好了！ –

下面是一個簡單的版本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>

來源

2016-05-13 17:20:33 alphapilgrim

形式angularjs如何顯示當前狀態，同時增加NG-模型

回答

相關問題