AngularJS ng-repeat问题，并按钮点击动态添加行

我想创建一个简单的表单与一些嵌套的数据。当我点击addSite()功能时，我想创建一个新的Site项目并将其附加到我的$scope.info。AngularJS ng-repeat问题，并按钮点击动态添加行

我无法创建多个表单并且$index变量未被传递给作用域。这里是，

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" 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" 
}

非常感谢您的帮助。

来源

2016-11-22 mvmthecreator

您可以检查以下 – Aruna

你做了几件事情错误如下。

你ng-repeat="site in sites track by $index"在您$scope.info.sites
也$scope.info.sites应该是迭代 sites代替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="[email protected]" 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>

方法2：（使用对象而不是数组）

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="[email protected]" 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>

来源

2016-11-22 02:37:59 Aruna

感谢回答您的快速回答阿鲁娜。请你可以解释我点2.为什么我们需要传递一个数组而不是一个对象。它让我想到，无法简单地连接2个对象是不可能的。在angularjs中有像merge和extend这样的方法。这不是使用这种方法的场景，或者我错了吗？非常感谢 – mvmthecreator

对象使用密钥工作，如果它没有任何密钥，将无法使用。在你的数据“站点”中：{{“id”：“1”}，{“id”：“2}}”，这是一个无效的对象，因为父对象没有任何子对象的键。要成为一个有效的对象，它应该像这样用一个键“'sites”：{“item1”：{“id”：“1”}，“item2”：{“id”：“2}}' 。如果你没有任何密钥，那么它应该是一个数组作为''网站“：[{”id“：”1“}，{”id“：”2}]' – Aruna

好吧，有可能重现像这样的对象：“”网站“：{”item1“：{”id“：”1“}，”item2“：{”id“：”2}}“或者它有意义吗？ – mvmthecreator

AngularJS ng-repeat问题，并按钮点击动态添加行

回答

相关问题