AngularJS ng-repeat 问题并在按钮单击时动态添加行答案

【问题标题】：AngularJS ng-repeat issue and add row dynamically on button clickAngularJS ng-repeat 问题并在按钮单击时动态添加行
【发布时间】：2016-11-22 02:08:39
【问题描述】：

我想创建一个包含一些嵌套数据的简单表单。当我单击addSite() 功能时，我想创建一个新的站点项并将其附加到我的$scope.info。

我不能创建一个以上的表单并且$index 变量没有被传递到作用域。这是一个，

plunkr link.

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body> 
  <div ng-app="myApp" ng-controller="myCtrl">

    <form>
      <label for="Domain Name">Domain Name</label>
      <input ng-model="info.name" type="text" /><br />
      <label for="IP">IP</label><input ng-model="info.ip" type="text" />
      <hr>
    <div ng-repeat="site in sites track by $index">
      <label for="">ID</label><input type="text" ng-model="site.id" />
      <label for="">title</label><input type="text" ng-model="site.title" />
      <label for="">desc</label><input type="text" ng-model="site.meta_desc" />
      <label for="">meta_keys</label><input type="text" ng-model="site.meta_keys" />


    </div>
      <br />
      <button ng-click="addSite()">Add Site</button>
    </form>

      <pre>
        {{info | json}}

      </pre>


</div>

script.js

angular.module('myApp', [])
.controller('myCtrl', function($scope){
  $scope.info = {};
  $scope.info.sites = {};


  $scope.addSite = function(){
    $scope.info.sites = {id:'',
                         title:'',
                         meta_desc:'',
                         meta_keys:''
    }

}


});

我尝试生成的数据：

{
  "name": "myDomain",
  "ip": "11.22.33.44.55",
  "sites": {
    {"id": "1" ,"title": "myTitle Site 1","meta_desc": "myDescription Site 1", "meta_keys": ["my", "meta", "keys"]},
    {"id": "2" ,"title": "myTitle Site 2","meta_desc": "myDescription Site 2", "meta_keys": ["my", "meta", "keys"]},
    {"id": "3" ,"title": "myTitle Site 3","meta_desc": "myDescription Site 3", "meta_keys": ["my", "meta", "keys"]}
},

}

我现在得到的数据：

{
  "sites": {
    "id": "",
    "title": "",
    "meta_desc": "",
    "meta_keys": ""
  },
  "name": "myDomain",
  "ip": "11.22.33.44.55"
}

非常感谢您的帮助。

【问题讨论】：

你可以在下面查看答案

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

你做错了几件事，如下所示。

您的ng-repeat="site in sites track by $index" 正在迭代 sites 而不是 info.sites 就像你的 $scope.info.sites
同样$scope.info.sites 应该是array 就像$scope.info.sites = [] 而不是object，你喜欢$scope.info.sites = {}
在addSite 方法上，而不是使用 $scope.info.sites.push()，您将通过分配它。

改正以上内容后，它工作了。

angular.module('myApp', [])
    .controller('myCtrl', function($scope){
      $scope.info = {};
      $scope.info.sites = [];
      
      
      $scope.addSite = function(){
        $scope.info.sites.push({id:'',
                             title:'',
                             meta_desc:'',
                             meta_keys:''
        });
  
     };
      
      
    });

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body> 
  <div ng-app="myApp" ng-controller="myCtrl">
  
    <form>
      <label for="Domain Name">Domain Name</label>
      <input ng-model="info.name" type="text" /><br />
      <label for="IP">IP</label><input ng-model="info.ip" type="text" />
      <hr>
    <div ng-repeat="site in info.sites track by $index">
      <label for="">ID</label><input type="text" ng-model="info.id" />
      <label for="">title</label><input type="text" ng-model="site.title" />
      <label for="">desc</label><input type="text" ng-model="site.meta_desc" />
      <label for="">meta_keys</label><input type="text" ng-model="site.meta_keys" />
      
      
    </div>
      <br />
      <button ng-click="addSite()">Add Site</button>
    </form>
      
      <pre>
        {{info | json}}
        
      </pre>
      
      
</div>

方法二：（使用对象代替数组）

angular.module('myApp', [])
    .controller('myCtrl', function($scope){
      $scope.info = {};
      $scope.info.sites = {};
      
      
      $scope.addSite = function(){
        var index = Object.keys($scope.info.sites).length;
        $scope.info.sites['item' + index] = {id:'',
                             title:'',
                             meta_desc:'',
                             meta_keys:''
        };
  
     };
      
      
    });

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body> 
  <div ng-app="myApp" ng-controller="myCtrl">
  
    <form>
      <label for="Domain Name">Domain Name</label>
      <input ng-model="info.name" type="text" /><br />
      <label for="IP">IP</label><input ng-model="info.ip" type="text" />
      <hr>
    <div ng-repeat="(idx, site) in info.sites track by $index">
      <label for="">ID</label><input type="text" ng-model="info.id" />
      <label for="">title</label><input type="text" ng-model="site.title" />
      <label for="">desc</label><input type="text" ng-model="site.meta_desc" />
      <label for="">meta_keys</label><input type="text" ng-model="site.meta_keys" />
      
      
    </div>
      <br />
      <button ng-click="addSite()">Add Site</button>
    </form>
      
      <pre>
        {{info | json}}
        
      </pre>
      
      
</div>

【讨论】：

感谢您的快速答复阿鲁纳。请你解释一下第2点。为什么我们需要传递一个数组而不是一个对象。令我惊讶的是，不可能在角度上轻松连接 2 个对象。在 angularjs 中有合并和扩展之类的方法。这不是使用这种方法的场景还是我错了？非常感谢
对象与密钥一起工作，如果没有任何密钥，则无法工作。在您的数据"sites": { {"id": "1"}, {"id": "2} } 中，这是一个无效对象，因为父对象没有任何子对象的键。要成为一个有效的对象，它应该是这样的，带有一个键 "sites": { "item1": {"id": "1"}, "item2": {"id": "2} } 。如果您没有任何密钥，则它应该是一个数组，如"sites": [ {"id": "1"}, {"id": "2} ]
好的，可以像 "sites": { "item1": {"id": "1"}, "item2": {"id": "2} } 这样复制对象还是完全有意义？
好的，我会改的。
@Hema，你是不是这个意思，stackoverflow.com/a/9593447/7055233