Передача ng-модели из вида в контроллер угловой js

Question

Я пытаюсь передать значение, подобное этому, из представления в контроллер в угловых js этой формы. Я не хочу его жестко кодировать. Как это можно сделать надлежащим образом?

angular.module('user').controller('UsersController', ['$scope', '$stateParams', 'Users', 
 
\t function($scope, $stateParams, Orders) { 
 
\t \t $scope.create = function() { 
 
\t \t \t var user = new Users({ 
 
\t \t \t \t child: [ 
 
\t \t \t \t \t { columnA: child[0].columnA, columnB: child[0].columnB, columnC: child[0].columnC }, 
 
\t \t \t \t \t { columnB: child[1].columnA, columnB: child[1].columnB, columnC: child[1].columnC }, 
 
\t \t \t \t \t ... 
 
\t \t \t \t \t { columnC: child[10].columnA, columnB: child[10].columnB, columnC: child[10].columnC } 
 
\t \t \t \t ] 
 
\t \t \t }); 
 
\t \t } 
 
\t } 
 
});

<form data-ng-submit="create()"> 
 
    <input type="text" data-ng-model="child[0].columnA"> 
 
    <input type="text" data-ng-model="child[0].columnB"> 
 
    <input type="text" data-ng-model="child[0].columnC"> 
 

 
    <input type="text" data-ng-model="child[1].columnA"> 
 
    <input type="text" data-ng-model="child[1].columnB"> 
 
    <input type="text" data-ng-model="child[1].columnC"> 
 
    
 
    ...... 
 

 
    <input type="text" data-ng-model="child[10].columnA"> 
 
    <input type="text" data-ng-model="child[10].columnB"> 
 
    <input type="text" data-ng-model="child[10].columnC"> 
 
</form>

Было бы лучше, если бы в многоразовой директивы, которые могут выполнять функции выше.

$scope.create = function() { 
    child: toJSON(child); 
} 

function toJSON(var a) { 
    //automatically search through the view for ng-model with child[index].columnName and change to the form above. 
} 

Answer 1

Я выписал plunker, который демонстрирует один из способов сделать что-то подобное тому, что вы пытаетесь сделать с помощью угловых практики.

Вы заметите, что я удалил все дублирование в представлении, используя ng-repeat, и сделал число child элементов динамическими. Я инициализировал объект users пустым массивом, но вы можете легко инициализировать объект данными с сервера.

Следует также отметить, что изменения в форме являются сразу отражение в объекте, то есть в функции create(), вы можете сериализовать users объект, а не значения формы. На практике это, вероятно, необязательно, поскольку, если вы используете такую ​​угловую библиотеку, как $http, сериализация в JSON и из нее выполняется автоматически.

$scope.users = { 
    child: [{}] 
}; 
$scope.create = function() { 
    var data = angular.toJson($scope.users); 
    alert(data); 
}; 

$scope.addUser = function() { 
    $scope.users.child.push({}); 
}; 

<form ng-submit="create()"> 
    <div ng-repeat="user in users.child"> 
    <input type="text" ng-model="user.columnA"> 
    <input type="text" ng-model="user.columnB"> 
    <input type="text" ng-model="user.columnC"> 
    </div> 
    <button type="submit">Submit</button> 
</form> 
<button ng-click="addUser()">Add New User</button> 

<pre> {{users}}</pre> 

Основной вынос из этого, однако, должно быть то, что вид и работа контроллера вместе, чтобы устранить дублирование и ненужные ссылки. мы больше не ссылаемся на child[0] в HTML, что делает HTML более читабельным и поддерживаемым.