添加许多元素与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

回答

相关问题