1

我創建動態表單NG-重複。根據用戶標識值,我正在獲得表單字段。一旦填好表單中的每個字段,我的添加用戶按鈕應該被啓用。截至目前尚未啓用。下面附上了我的代碼。與形式與NG-重複指令angularjs

我的html代碼:

<div ng-app="myApp"> 

<div ng-controller="myCtrl"> 
    <form role="form" name='userForm' novalidate> 
     <div class="container"> 
      <div class="row" ng-repeat="myid in userid"> 

       <div class="form-group"> 
        <div class="col-md-3"> 
         <label>ID</label> 
         <input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled> 
        </div> 
        <div class="col-md-3"> 
         <label>Comments</label> 
         <textarea ng-model="manualComment" id="textarea1" rows="1"></textarea> 
        </div> 

        <div class="col-md-3 "> 
         <label>Gender</label> 

         <select ng-model="gender" name="select2"> 
          <option value="male">Male</option> 
          <option value="female">Female</option> 

         </select> 
        </div> 
       </div> 

      </div> 
     </div> 
     <div class="buttonContainer text-center btn-container"> 
      <br> 
      <button ng-disabled="!(myid && manualComment && gender)" type="button" id="adduser">Add user</button> 
      <button type="button" class="btn button--default btn--small pull-center">Close</button> 
     </div> 
    </form> 
</div> 

我app.js文件

var myApp = angular.module('myApp', []); 
myApp.controller('myCtrl', function($scope) { 
$scope.userid = [1, 2, 3] 
}); 

如何啓用添加用戶按鈕,一旦所有領域都充滿?

+0

你可能需要'NG-disabled' – nadavvadan

回答

0

更新:

如果你想你的初始陣列從服務器轉換爲使用數組如果你想它包含所有形式值的對象檢查此琴

JSFiddle Demo

請參閱下面的小提琴!

JSFiddle Demo

基於下面的聲明,這是我的解決方案。

如何啓用添加用戶按鈕,一旦所有領域都充滿?

我已將required屬性添加到所有輸入字段,表格名稱userForm是範圍內的變量。它有它的有效性變量,在我的情況,我使用userForm.$invalid除非所有required屬性字段填寫,這將是真實的。該Add User通過使用ng-disabled屬性無效,請檢查下面的jsfiddle的演示。

JSFiddle Demo

<div ng-app="myApp"> 

<div ng-controller="myCtrl"> 
    <form role="form" name='userForm' novalidate> 
     <div class="container"> 
      <div class="row" ng-repeat="myid in userid"> 

       <div class="form-group"> 
        <div class="col-md-3"> 
         <label>ID</label> 
         <input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled> 
        </div> 
        <div class="col-md-3"> 
         <label>Comments</label> 
         <textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea> 
        </div> 

        <div class="col-md-3 "> 
         <label>Gender</label> 

         <select ng-model="gender" name="select2" required> 
          <option value="male">Male</option> 
          <option value="female">Female</option> 

         </select> 
        </div> 
       </div> 

      </div> 
     </div> 
     <div class="buttonContainer text-center btn-container"> 
      <br> 
      <button ng-disabled="userForm.$invalid" type="button" id="adduser">Add user</button> 
      <button type="button" class="btn button--default btn--small pull-center">Close</button> 
     </div> 
    </form> 
</div> 
</div> 
+0

我怎樣才能在這個例子中,每個場模型的價值。我需要將此模型值傳遞給服務器。 – user3760261

+0

@ user3760261更新了我的答案! –

+0

根據我的要求,我的$ scope.userid只有userid的。因爲我不能像你那樣重視任何價值。是否有任何其他的方式來得到這個模型值 – user3760261