Javascript 无法使用Angular.js中的ng repeat添加新元素_Javascript_Angularjs

Javascript 无法使用Angular.js中的ng repeat添加新元素

javascript angularjs

Javascript 无法使用Angular.js中的ng repeat添加新元素,javascript,angularjs,Javascript,Angularjs,我需要一个人帮忙。我需要在angular.js中使用ng repeat创建额外的输入元素。我做了一些事情，但它不起作用。我在下面解释我的代码 <div> <ul> <li ng-repeat="r in arr"> <input type="text" ng-model="r.uname"> </li> </ul>

我需要一个人帮忙。我需要在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>


功能控制器（$scope）{
$scope.arr=[{uname:null}]；
$scope.create=function（）{
console.log（'hii'）；
$scope.arr.push({
uname:null
});
log（'hi'，$scope.arr）；
}
}

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

像这样定义数组

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

其他一切看起来都很好。

请参阅

使用

track by

实现您的目标：

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

第一件事是你在数组中推同一个元素，这样你就可以在ng重复中跟踪这个元素

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

但它仍然没有创建，然后尝试控制台即将出现，但它没有创建

使用$scope.$apply（）手动运行摘要循环

我在代码中没有看到错误。它的工作原理是：

您正在运行哪个版本的angular。您提到的代码在angular 1.3及以上版本中不起作用。但它在1.2版中仍然有效。请参见1.2

日志中有错误吗？这看起来像代码，应该可以正常工作。但是，在您对其中一个答案的评论中，您提到您正在使用

angular 1.0.7

。这是一个古老的版本，不建议用于任何目的。如果您遇到的问题与您正在使用的angular版本有关，那么除了“更新到新版本”之外，您不太可能收到合理的答案，因为您尝试使用的angular版本对angular进行了大量更改。因此，我投票将此问题作为离题回答（不可复制），因为这不是一个可以在现代版本的框架中复制的问题。请检查您提供的链接。它可以工作，但在我这边不工作。我使用的是版本1.0.7

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

<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>

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