Push the input values ​​of ng-repeat into the array with Angu…

综合技术 2017-12-30

I have a ng-repeat
displaying a list of products
with an input each. I want to be able to push the value of each input together with a parameter from every item into a new array to create an order.

So far I managed to do it individually, but not all together.

Here's my HTML:

{{pa.nom}}

Add items

And the function:

$scope.singleorder = [];

$scope.insert = function(nom, basket){
  $scope.singleorder.push({
    'product': nom,
    'number': basket
  });
  console.log($scope.singleorder);
}

I assume the issue has to do with keeping track of the different models of the inputs on each repeat, but I don't know how to deal with it.

I've also tried adding each item individually using ng-change
on the input, but it will push an object on every change, duplicating the item on every change, so it won't work.

Any tips?

The trick would be to have an input for each
repeated element in ng-repeat
.

{{pa.nom}}
Add items

insert()
will loop over products and insert in singleOrder
when basket has been set:

$scope.insert = function() {
    for (var i = 0; i < $scope.products.length; i++) {
        if ($scope.products[i].basket) { // if input has been set
            $scope.singleorder.push({
              'product': $scope.products[i].nom,
              'number': $scope.products[i].basket
            });
        }
    }
}

JSFiddle demo

Hello, buddy!

责编内容by:Hello, buddy! (源链)。感谢您的支持!

您可能感兴趣的

Vue as an Angular alternative for Ionic: The Compo... In this tutorial, we will focus on Vue Components in an Ionic 4 application. We will first configure the Ionic Team’s Stac k from the pr...
业界 | 成为CTO之前,我希望有人告诉我这些... 大数据文摘作品 编译:赵逸云、Shan LIU 、蒋宝尚 如何成为一位合格的CTO,在成为CTO之前又需要哪些职业素养,即将离职的 SketchDeck CTO讲述他在过去四年担任此职位的经验。 这是一段刺激又美妙的体验,在创业公司工作与传统的任职大不相同:一开始,你完全不知道公司...
Angular and Coffeescript can not access the applic... I'm trying to make multiple files to manage and refactor my angular code in a rails project with coffeescript. I think the coffeescript is making m...
Persisting user authentication with BehaviorSubjec... Persisting user authentication with BehaviorSubject in AngularIn this article, I will show you how to manage user authentication status with the ...
Angular Performance Considerations or: How We Ende... When I came to Curalate, our dashboard was a bunch of page-specific jQuery mixed with some helpful libraries. Naturally, this setup became unwieldy...