如何格式化我的 AngularJS 数据模型？

Question

您好，我刚从 Angular 开始，我正在努力寻找答案，我确信这是一件非常简单的事情。

我目前正在获取一些输入框的值并将它们推送到我的范围内。这是创建一个长“数组”，例如：

['data-1','data-2','data-3']

我想改用以下方式格式化我的数据

$scope.data = [
    {
      'header1':  'data1-1',
       'header1': 'data1-2',
       'header1': 'data1-3'
    },
    {
         'header1': 'data2-1',
         'header1': 'data2-2',
         'header1': 'data2-3'
    }

]

这是我目前的功能。

$scope.createRow = function(){
    angular.forEach(angular.element("input"), function(value, key){
            $scope.td.push($(value).val());
        });

}

任何帮助或指点将不胜感激，因为我只是以角度的方式转过头

Answer 1

做到这一点并不难...但在我给你一把枪打你自己的脚之前，我想解释一下为什么你想要你提到的其他格式的结构是有益的。您似乎有很多数据重复，这总是一个危险信号。

现在对于代码，您只需要在将对象推送到数组之前创建对象：

$scope.createRow = function(){
    angular.forEach(angular.element("input"), function(value, key){
        var obj = {
            "header1": val + "-1",
            "header2": val + "-2"
        };

        $scope.td.push(obj);
    });
}

编辑：

好的，所以您正在尝试向表中添加新行。首先，您不应该使用 angular.forEach，而是 HTML 中的那些输入元素应该绑定到现有的范围对象，例如：

// obviously use better names than Input1Value
// I am here just giving you example
$scope.bindData = {
    Input1Value: null,
    Input2Value: null
}; 

// in HTML you will do
// <input ng-model="bindData.Input1Value" />
// <input ng-model="bindData.Input2Value" />

现在您已经消除了讨厌的 angular.forEach，您需要有某种事件处理程序，例如，当用户单击按钮时，您希望将此对象添加到数据绑定到的数组中。只需确保在将 $scope.bindData 对象添加到数组时对其进行克隆即可。

$scope.createRow = function(){
    var newRowData = $scope.cloneObject($scope.bindData);
    $scope.td.push(newRowData);
}

// http://heyjavascript.com/4-creative-ways-to-clone-objects/
// https://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
$scope.cloneObject = function(objToClone) {     
    var newObj = (JSON.parse(JSON.stringify(objToClone)));
}

要关闭这个答案 - 请记住，如果您发现自己使用 AngularJS 直接在 Javascript 中引用 HTML DOM 元素 - 您做错了。消除这是一个讨厌的习惯，尤其是如果您来自 jQuery 背景（以及如何不是？），所有内容都是$("#OhHiThere_ElementWithThisId)。

显然 StackOverflow 上这个主题的主线程是这个：

“Thinking in AngularJS” if I have a jQuery background?

但是我发现它太理论化了，所以谷歌一下，你可能会找到更好的概述，例如：

jQuery vs. AngularJS: A Comparison and Migration Walkthrough