Как мне форматировать мою модель данных AngularJS?

Question

Привет, я только начинаю с углового, и я изо всех сил стараюсь найти ответ на то, что, на мой взгляд, довольно просто.

В настоящее время я получаю значения некоторых полей ввода и нажимаю их в свой объем. Это создает один длинный «массив», например:

['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); 
    }); 
} 

EDIT:

ОК, так что вы пытаетесь добавить новую строку в Таблица. Прежде всего, вы не должны делать 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))); 
} 

Чтобы закрыть этот ответ от - имейте в виду, , если вы когда-нибудь окажетесь непосредственно ссылки HTML DOM элементов в JavaScript, с AngularJS - вы делаете что-то неправильно. Это неприятная привычка устранять, особенно если вы исходите из фона jQuery (а как нет?), Где все $("#OhHiThere_ElementWithThisId).

Очевидно, что основной поток на эту тему на StackOverflow это одна:

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

Однако я считаю, что это слишком теоретический, так Google вокруг, и вы можете найти лучшие обзоры, как:

jQuery vs. AngularJS: A Comparison and Migration Walkthrough