add many element with angularJS

Question

Hello I have created a button for add element in a list, but it add only one object, how can i do for add each object for each click on button ?

this is 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>

and this is 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);
   }

}]);

thanks for help

Nikhil Mohanan · Accepted Answer · 2016-11-21 11:40:43Z

<!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>

Issue with your code is , you are trying to insert null element multiple times, and it is making duplicates in array.So issue can be fixed by adding track by with ng-repeat.(add valid elements in array to see correct data)

Collectives™ on Stack Overflow

add many element with angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related