添加許多元素與angularJS

你好我已經創建了一個列表中添加元素的按鈕，但它只添加一個對象，我怎麼能爲每個點擊按鈕添加每個對象？添加許多元素與angularJS

這是HTML

<body > 
<div ng-controller="myControl"> 
    <ul> 
    <li ng-repeat="x in products">{{x}}  
    <button ng-click="removeEle($index)"> X </button> 
    </li> 
    </ul> 
    <button ng-click="addEle()"> add</button> 

</div>

，這是JS

var app = angular.module('myClick', []); 

app.controller('myControl', ['$scope', function($scope){ 


    $scope.products=['one','two','three']; 
    $scope.addEle= function(){ 
     $scope.products.push($scope.add); 
    } 
    $scope.removeEle =function(x){ 
    $scope.products.splice(x,1); 
    } 

}]);

感謝您的幫助

來源

2016-11-21 nowaySync

<!DOCTYPE html> 
 
<html data-ng-app="myClick"> 
 

 
<head> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="myControl"> 
 
    <ul> 
 
     <li ng-repeat="x in products track by $index">{{x}} 
 
     <button ng-click="removeEle($index)">X</button> 
 
     </li> 
 
    </ul> 
 
    <button ng-click="addEle()">add</button> 
 
    </div> 
 
    <script> 
 
    var app = angular.module('myClick', []); 
 

 
    app.controller('myControl', ['$scope', 
 
     function($scope) { 
 

 

 
     $scope.products = ['one', 'two', 'three']; 
 
     $scope.addEle = function() { 
 
      $scope.products.push($scope.add); 
 
     } 
 
     $scope.removeEle = function(x) { 
 
      $scope.products.splice(x, 1); 
 
     } 
 

 
     } 
 
    ]); 
 
    </script> 
 
</body> 
 

 
</html>

問題與您的代碼是，你試圖多次插入空元素，它是在數組中重複。所以問題可以通過添加跟蹤ng-repeat來修復（添加數組中的有效元素以查看正確的數據）

來源

2016-11-21 11:40:43

添加許多元素與angularJS

回答

相關問題