Eric Eric - 3 months ago 8
AngularJS Question

AngularJS Posting with dynamically created elements

I'm a bit new to AngularJS, and I need a bit of help posting data. I am creating a new input box on keypress of each input box. Well when my user clicks the add button I want to post data to the db via angularjs. My first input box successfully posts the data to the db, but the following input boxes do nothing on ng-click.

Here's my HTML:

<div id="divAddRow" class="row" ng-app="GroupApp">
<div class="col-lg-8" ng-controller="GroupCtrl">
<div id="row1" class="input-group input-group-lg addGroup w3-animate-bottom">
<input class="form-control input-lg txtAddGroup" ng-model="group.GroupName" placeholder="Group Name..." />
<span class="input-group-btn">
<button id="btn" type="button" ng-click="AddGroup();"
class="btn btn-success btn-flat"><i class="fa fa-plus"></i></button>
</span>
</div>
</div>
</div>


Here's where I create the controls dynamically using clone() of the first div:

$(document).on('keydown', '.txtAddGroup', (function (e) {
//this function clones the parent group and if one below it does not exist, it adds it to the DOM
var currentRowNum = $(this).parent().attr('id').replace(/row/, '');
var nxtRowNum = parseInt(currentRowNum, 10) + 1;
if ($('#row' + nxtRowNum).parent().length === 0) {
$('div.addGroup:last').after($('<br/>').add($('div.addGroup:first').clone().prop('id', 'row' + nxtRowNum)));
$('div.addGroup:last input').val('');
}
}));


Here is my angularjs script:

var app = angular
.module('GroupApp', [])
.controller('GroupCtrl', function ($scope, AddGroup) {
$scope.AddGroup = function()
{
AddGroup.AddGrouptoDB($scope.group);
}

}) .factory("AddGroup", ['$http', function ($http){
var fac = {};
fac.AddGrouptoDB = function(group)
{
$http.post("/Group/AddGroup", group).success(function (response) {
alert(response.status);
})


}
return fac;
}])


How do I accomplish this? Let me know if I am not being clear enough. Thank you for any help!!

Answer

Maybe we can do this in a more angular way...

clone would not be my first choice to do this. I would use ng-repeat instead where ng-click extends a value on you model. This way you can assign a separate attribute to each of your inputs.

It would look something like this:

html:

<div id="divAddRow" class="row" ng-app="GroupApp"> 
    <div class="col-lg-8" ng-controller="GroupCtrl">
          <div id="row1" ng-repeat="group in groups" class="input-group input-group-lg addGroup w3-animate-bottom">
                    <input class="form-control input-lg txtAddGroup" ng-model="group.name" placeholder="Group Name..." />
                    <span class="input-group-btn">
                      <button id="btn" type="button" ng-click="AddGroup(group);"
                          class="btn btn-success btn-flat"><i class="fa fa-plus"></i></button>
                    </span>
           </div>
    </div>
</div>

js:

var app = angular
       .module('GroupApp', [])
       .controller('GroupCtrl', function ($scope, AddGroup) {
           var id_generator = function(id){
               return id + 1 // or query for the last id or generate a guid
           }
           $scope.groups = [{'id': 1, 'name': ''}];
           $scope.AddGroup = function(group)
           {
               AddGroup.AddGrouptoDB(group);
               var newgroup = {'id':id_generator($scope.groups[$scope.groups.length - 1].id),
                               'name': ''}
               $scope.groups.push(newgroup);

           }

       }) .factory("AddGroup", ['$http', function ($http){
var fac = {};
fac.AddGrouptoDB = function(group)
{
    $http.post("/Group/AddGroup", group).success(function (response) {
        alert(response.status);
    })


}
return fac;
}]);
Comments