1

我的数据集正在返回员工列表。我正在尝试使用第一个索引中的字段来构建我的表单以添加新员工。我正在努力阅读表单字段数据以添加新员工。小提琴在这里：http: //jsfiddle.net/nicktest2222/AB5Yw/2/

任何帮助将不胜感激。提前致谢。

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>

JS

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 = '';

};

}

4

2 回答 2

2

您需要将输入元素绑定到model

我会添加到控制器

$scope.formData = {};

并在视图上将输入更改为

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

然后在里面addTodo你可以使用

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

演示在 http://jsfiddle.net/AB5Yw/4/

于 2013-07-23T17:02:56.760 回答
1

http://jsfiddle.net/EXcqQ/正在工作。本质上，您需要像遍历数组一样遍历 InputList 对象。幸运的是，Angular 有办法做到这一点：

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

请注意，我还必须在 InputList 上包含零索引才能仅遍历第一个对象。

于 2013-07-23T16:09:17.877 回答