Question

我需要一个帮助。我需要在angular.js中使用ng-repeat创建额外的输入元素。我做了一些事情，但它不起作用。我在下面解释我的代码。

<div>
        <ul>
            <li ng-repeat="r in arr">
                <input type="text" ng-model="r.uname"> 
            </li>
        </ul>
    </div>
<button type="button" id="btn" ng-click="create();">Add</button>

这里我需要当用户点击添加按钮时，新输入字段将在第一个下方创建。我的脚本端代码如下所示。

<script type="text/javascript">
        function ContactController($scope){
            $scope.arr=[{uname:null}];
            $scope.create=function(){
                console.log('hii');
                 $scope.arr.push({
                     uname:null
                 });
                 console.log('hi',$scope.arr);
            }
        }
    </script>

但是在这里我无法生成新的输入类型元素。请帮帮我。

Answer 1

像这样定义你的数组..

$scope.arr=[{}];
$scope.create=function(){
  $scope.arr.push({});
  console.log('hi',$scope.arr);
}

其他一切看起来都很好......

Answer 2

请参阅CreationHelper。

使用track by来实现您的目标：

<li ng-repeat="r in arr track by $index">

Answer 3

首先你要在数组中推送相同的元素，以便跟踪ng-repeat中的

    <div ng-repeat="r in arr track by $index">    
   <input type="text" ng-model="r.uname">  </div>

仍然没有创建然后尝试控制台即将到来并且它没有创建

使用$ scope。$ apply（）手动运行摘要周期

Answer 4

我的代码中没有显示错误。它有效：http://jsfiddle.net/Lvc0u55v/9536/

$scope.arr=[{uname: null}];
  $scope.create = function(){
    console.log('hii');
    $scope.arr.push({
      uname: null
    });
    console.log('hi',$scope.arr);
  }

Answer 5

您正在运行哪个版本的角度。您提到的代码在角度1.3及更高版本中不起作用。它的工作原理是1.2。请参阅1.2

https://plnkr.co/edit/52ygFNbSFZQr3SdCvlDc?p=preview

<body ng-controller="ContactController">
<p>Hello {{name}}!</p>

<div>
    <ul>
        <li ng-repeat="r in arr">
            <input type="text" ng-model="r.uname"> 
        </li>
    </ul>
</div>
<button type="button" id="btn" ng-click="create();">Add</button>

<script type="text/javascript">
     function ContactController($scope){
        $scope.arr=[{uname:null}];
        $scope.create=function(){
            console.log('hii');
             $scope.arr.push({
                 uname:null
             });
             console.log('hi',$scope.arr);
        }
    }
</script>

1.4及以上使用以下内容。 https://plnkr.co/edit/t7STLztqoMiPKaiHr62V?p=preview

<body ng-controller="ContactController">
<p>Hello {{name}}!</p>

<div>
    <ul>
        <li ng-repeat="r in arr">
            <input type="text" ng-model="r.uname"> 
        </li>
    </ul>
</div>

添加

app.controller('ContactController', function($scope) {
$scope.name = 'World';
$scope.arr=[{uname:null}];
        $scope.create=function(){
            console.log('hii');
             $scope.arr.push({
                 uname:null
             });
             console.log('hi',$scope.arr);
        }
});

无法在Angular.js中使用ng-repeat添加新元素

5 个答案: