Question

我对AngularJS有点新意，我需要一些帮助发布数据。我正在每个输入框的按键上创建一个新的输入框。好吧，当我的用户点击添加按钮时，我想通过angularjs将数据发布到数据库。我的第一个输入框成功地将数据发布到数据库，但以下输入框在ng-click上不执行任何操作。

这是我的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>

这是我使用第一个div的clone（）动态创建控件的地方：

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

这是我的angularjs脚本：

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;
}])

我如何做到这一点？如果我不够清楚，请告诉我。谢谢你的帮助!!

Answer 1

实际上当你使用棱角分明时，你应该忘记你在jquery中学到的东西。回到你的jquery代码，那里发生的是角度摘要循环。更简单，角度没有看到jquery逻辑。您可以尝试在keydown事件回调结束时使用$ scope。$ apply（）（我不推荐它）。

更好的解决方案是使用角度事件指令。请看这个链接：from the angular js docs

Answer 2

当你的页面加载时，角度应用程序会被引导。在此期间，它将所有观察者附加到模型上，设置指令（在您的情况下为ngClick），依此类推。因此，在页面完全加载时，将角色完成将某些行为附加到DOM元素（通过指令）。对于您动态添加的DOM元素，这不会发生。因此，对那些动态创建的元素的指令是无用的。 Angular完全不了解这些指令。因此，他们没有回应点击事件。

您可以阅读有关指令的文档

https://docs.angularjs.org/guide/directive

前几段对你有帮助。

要解决这个问题，$ compile就是你要找的。

Answer 3

也许我们可以用更有棱角的方式做到这一点......

clone不是我做这件事的第一选择。我会使用ng-repeat代替ng-click扩展模型的值。这样，您可以为每个输入分配单独的属性。

它看起来像这样：

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;
}]);

AngularJS使用动态创建的元素发布

3 个答案: