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問題，並按鈕點擊動態添加行

回答

相關問題