问

克隆angularjs中的元素

云在天涯无无边_737 发布于 2023-02-13 07:06

jquery

我需要复制一些输入字段以处理来自客户端的数据.我用jQuery http://jsfiddle.net/m7R3f/1/完成了它

HTML:

$(document).ready(function ()
{
    $("#add").click(function ()
    {
        $(".entry:first").clone(false).appendTo("#fields-list");
    });
});

但是我刚开始学习Angular,并希望将这些代码转换为Angular.我已经在stackoverflow中阅读了问题,并在这里找到了带有angularjs的代码:http://jsfiddle.net/roychoo/ADukg/1042/.但是,它似乎仅适用于一个输入字段？我可以使用AngularJS克隆/复制几个输入字段吗？(换句话说:将上面的代码转换为AngularJS版本？)非常感谢.

1 个回答

如果要克隆html元素,则使用ng-repeat指令的最佳方法.

你的控制器

var App = angular.module('App', []).controller('Test', ['$scope',
  function($scope) {

    $scope.inputCounter = 0;
    $scope.inputs = [{
      id: 'input'
    }];
    $scope.add = function() {
      $scope.inputTemplate = {
        id: 'input-' + $scope.inputCounter,
        name: ''
      };
      $scope.inputCounter += 1;
      $scope.inputs.push($scope.inputTemplate);
    };

  }
])


<!DOCTYPE html>
<html ng-app="App">

<head lang="en">
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="Test">
  <fieldset id="fields-list">
    <div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
      <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input" name="input-1">
      </div>
      <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="date" name="date">
    </div>
    <div class="pure-u-1-5">
        <input type="text" class="pure-input-1" id="input-2" name="input-2">
    </div>
    </div>
  </fieldset>
  <button type="button" id="add" ng-click="add()">Add</button>

</body>

</html>


                
                    2023-02-13 07:21  回答
                       郭怡如珮尧琼江



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签