2015-12-01 2 views
0

Я хотел бы получить данные из очень простой динамической формы, и мне нужна ваша помощь. Моя основная форма (которая будет обновлена, когда я получу эту работу) будет выглядеть так.Как получить данные из динамической формы в Angular-Meteor?

HTML:

<form class="new-task"> 

    <li ng-repeat="user in party.invited"> 

     {{user.email}}: <input ng-model="newTask"> 

    </li> 

    <button ng-click="addTask(newTask);">ADD</button> 
</form> 

В основном это создает поле ввода для каждого пользователя в выбранной моей партии. Теперь я хотел бы получить все данные во всех этих полях ввода. Вот где я потерялся ...

Я пробовал записывать материал в консоли, но я всегда получаю «неопределенный».

JS:

angular.module("testapp").controller("TaskCtrl", ['$scope', '$stateParams', '$meteor', 

    function ($scope, $stateParams, $meteor) { 

    $scope.party = $meteor.object(Parties,$stateParams.partyId).subscribe('parties'); 

    $scope.addTask = function (newTask) { 
     console.log(newTask); 
    }; 

}]); 

ответ

1

Насколько я понял ваш вопрос, вы хотите связать несколько полей ввода в отдельный массив. Если это так, вам нужно создать пустой массив в области видимости и затем ссылаться на элементы массива внутри директивы ng-repeat в ваших атрибутах ng-model с помощью tasks[$index]. Таким образом, вы сможете получить все входные данные, обратившись к массиву tasks. Поскольку вы хотите получить доступ ко всем элементам массива сразу, вам не нужно передавать аргумент newTask в вашу функцию addTask.

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.party = { 
 
    "invited": [{ 
 
     "email": "[email protected]" 
 
    }, { 
 
     "email": "[email protected]" 
 
    }] 
 
    }; 
 
    $scope.tasks = []; 
 
    $scope.addTask = function() { 
 
    console.log($scope.tasks); 
 
    }; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <form class="new-task"> 
 
     <li ng-repeat="user in party.invited"> 
 
     {{user.email}}: 
 
     <input ng-model="tasks[$index]" /> 
 
     </li> 
 
     <button ng-click="addTask()">ADD</button> 
 
    </form> 
 
    </div> 
 
</body>

+1

Здравствуйте Matthias. Это работало как шарм. Я пробовал так много вещей, когда мне просто нужно было объявить новый массив. Большое спасибо! – shish

+0

Добро пожаловать! –

Смежные вопросы