AngularJS - 表格數據

我的數據集正在返回員工列表。我試圖使用第一個索引中的字段構建我的表單來添加新員工。我正在努力閱讀表單字段數據以添加新員工。小提琴在這裏：http://jsfiddle.net/nicktest2222/AB5Yw/2/AngularJS - 表格數據

任何幫助將不勝感激。提前致謝。

HTML

<form ng-submit="addTodo()"> 
    <span ng-repeat="t in todos[0].Collection.InputList"> 
     <label>{{t.DisplayName}}</label> 
     <input type="text" name="{{t.FieldName}}"><br> 
    </span> 
    <br>  
    <input class="btn-primary" type="submit" value="Add"> 
</form>

function TodoCtrl($scope) { 
$scope.todos = [{ 
    "Header": "Chris Morgan", 
     "Collection": { 
     "InputList": [{ 
      "FieldName": "dpFname", 
       "DisplayName": "First Name", 
       "Required": "1", 
       "AllowEdit": "1", 
       "TabOrder": "1", 
       "InputType": "TEXTBOX", 
       "Style": "", 
       "Validate": "", 
       "InputMask": "", 
       "Options": [], 
       "Value": "Chris" 
     }, { 
      "FieldName": "dpMname", 
       "DisplayName": "Middle Name", 
       "Required": "0", 
       "AllowEdit": "1", 
       "TabOrder": "2", 
       "InputType": "TEXTBOX", 
       "Style": "", 
       "Validate": "", 
       "InputMask": "", 
       "Options": [], 
       "Value": "" 
     }, { 
      "FieldName": "dpLname", 
       "DisplayName": "Last Name", 
       "Required": "1", 
       "AllowEdit": "1", 
       "TabOrder": "3", 
       "InputType": "TEXTBOX", 
       "Style": "", 
       "Validate": "", 
       "InputMask": "", 
       "Options": [], 
       "Value": "Morgan" 
     }] 
    } 
}]; 

$scope.addTodo = function() { 
    $scope.todos.push({ 
     Header: $scope.dpFname + " " + $scope.dpLname, 
     Collection: { 
      "InputList": [{ 
       "FieldName": "dpFname", 
        "DisplayName": "First Name", 
        "Required": "1", 
        "AllowEdit": "1", 
        "TabOrder": "1", 
        "InputType": "TEXTBOX", 
        "Style": "", 
        "Validate": "", 
        "InputMask": "", 
        "Options": [], 
        "Value": $scope.dpFname 
      }, { 
       "FieldName": "dpLname", 
        "DisplayName": "Last Name", 
        "Required": "1", 
        "AllowEdit": "1", 
        "TabOrder": "3", 
        "InputType": "TEXTBOX", 
        "Style": "", 
        "Validate": "", 
        "InputMask": "", 
        "Options": [], 
        "Value": $scope.dpLname 

      }, { 
       "FieldName": "dpMname", 
        "DisplayName": "Middle Name", 
        "Required": "0", 
        "AllowEdit": "1", 
        "TabOrder": "2", 
        "InputType": "TEXTBOX", 
        "Style": "", 
        "Validate": "", 
        "InputMask": "", 
        "Options": [], 
        "Value": $scope.dpMname 
      } 


      ] 
     } 

    }); 

    // Clear form fields 
    $scope.dpFname = ''; 
    $scope.dpLname = ''; 
    $scope.dpMname = ''; 

};

}

來源

2013-07-23 Nick

您需要輸入元素綁定到model

我將輸入添加到控制器

$scope.formData = {};

，並在視圖改變爲

<input type="text" ng-model="formData[t.FieldName]">

然後裏面addTodo你可以使用

$scope.formData.dpFname 
$scope.formData.dpMname 
$scope.formData.dpLname

Demo athttp://jsfiddle.net/AB5Yw/4/

來源

2013-07-23 17:02:56

輝煌，謝謝！ – Nick

http://jsfiddle.net/EXcqQ/現在正在工作。基本上你需要像遍歷數組一樣遍歷InputList對象。幸運的角有辦法做到這一點：

<span ng-repeat="(key, data) in todos[0].Collection.InputList[0]">

通知，我也只好包括InputList零指數剛剛經過第一個對象進行迭代。

來源

2013-07-23 16:09:17 Sharondio

嗨，Sharondio。感謝您的回覆，但是我認爲您錯過了我的問題。我按照需要構建表單，但我無法使用表單輸入值添加新記錄。當通過「addTodo」函數將值傳遞給我的數據集時，我無法從我動態構建的表單中訪問我的輸入值。那有意義嗎？ – Nick

啊，對不起。 http://jsfiddle.net/882VW/1/ 在這裏，您希望使用$ index和$ parent。$ index值將ng模型綁定到原始模型中的正確項目。 – Sharondio

AngularJS - 表格數據

回答

相關問題