add new inputs in angularjs

Question

How can I add new multiple inputs with angularjs?

I tried but can't binds ng-repeat with input ng-model. I wish to add ng-repeat of selectedItems to <div class="item-text-wrap">but It doesn't work unless initialized it.

If I click add new product button new Product Select field and new price input field will be displayed as in picture.

enter image description here

here is plunker.

here is my html

 <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
      <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
      <link rel="stylesheet" href="style.css" />
      <script src="script.js"></script>
    </head>

      <body ng-controller="mycontroller">
 <!-- <div class="item-text-wrap" ng-repeat="item in selectedItems"> -->
          <div class="item-text-wrap">
            <label class="item item-input item-select">
              <span class="input-label">Product</span>
              <select  ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item)" class="col col-100"><option style="display:none" value="">select an item</option></select>
            </label>
            <label class="item item-input">
              <span class="input-label">Price</span>
               <input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
            </label>
          </div>
          {{selectedItems}}
      </body>

    </html>

here is my script.js

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

app.controller('mycontroller', function($scope) {

  $scope.selectedItems = [];
  $scope.items = [{'id':1,'name':'apple', 'price': 100},
  {'id':2,'name':'orange', 'price':75},
  {'id':3,'name':'lemon', 'price':50}]

  $scope.toggleChange = function (item) {
    $scope.selectedItems.splice($scope.selectedItems.indexOf(item), 1);
    $scope.selectedItems.push(item);
  };

});

I wish to add items to selectedItems, means more than one item. but I can't bind selectedItems with items. Please check in plunker. I updated the link. — Ryan Exlay
– Ryan Exlay, Commented May 13, 2015 at 5:53
that means you want more than one item in the selected items array based on the select tag. Am i right? If so, while calling the toggle change function comment out the splice function line — Alhuck
– Alhuck, Commented May 13, 2015 at 5:58
I can't Alhuck, user need to be displayed next input fields. This is just demo. There are some more properties in item object, like input date, which might be different. — Ryan Exlay
– Ryan Exlay, Commented May 13, 2015 at 6:02

Afsar · Accepted Answer · 2015-05-13 06:19:24Z

0

check out this plunker: as i dont know you full object details you can still add few condition to validate items.

http://plnkr.co/edit/Arw9Jibeu0kmLzgoX8ou?p=preview

  <button ng-click="addProduct(item)">add new product</button>
  <br />
    {{selectedItems}}
  <br />
  <b>Added items:</b>
  {{addedItems}}

let me know , if need any changes in it.

answered May 13, 2015 at 6:19

Afsar

3,1242 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Exlay Over a year ago

Thanks for your help, dude. But I need addtional items' inputs field. Please see picture in question. I just added.

Alhuck · Accepted Answer · 2015-05-13 09:47:54Z

0

In order to add items to your seletedItems array from items array and avoid duplicates just use indexof to find if there's item in your selectedItems array already and if it found delete it, if not just add it!!!

As per your updated question, you can do this using directive,

Here i used one directive and ngRepeat to create Dom again and again using the directive while clicking add new product function by increasing the array count!!!

Here is the updated plunker with your code!!!!!

http://embed.plnkr.co/OpYjLEpX8kScqfIMN175/preview

Hope this helps

edited May 13, 2015 at 9:47

answered May 13, 2015 at 6:16

Alhuck

1,0298 silver badges11 bronze badges

4 Comments

Ryan Exlay Over a year ago

Thanks for your help, dude. But I need addtional items' inputs field. Please see picture in question. I just added.

Alhuck Over a year ago

how many input fields and select fields you need to add like this and what are its options for select tag

Ryan Exlay Over a year ago

3 input fields need to add for a records. like inventory item input. input items, amount per packages, and arrived date. Number of records will be dynamic.

Ryan Exlay Over a year ago

Thank, it's helpful but can't accept duplicate entry. Anyway, appreciate for your help. :-) I got it now.

Ryan Exlay · Accepted Answer · 2015-05-14 02:34:46Z

I spent many hours to complete add new inputs fields to as pictures. It enable multiple duplicate entry. WORKING PERFECT as I wish to. Love it lot. :-)

It might not be the best solutions but It complete the task, I intended to and hope to be useful for others.

And please suggest any better approach.

COPY items to selectedItems by angular.copy().

Push is just pointer, point to ordinary address. So it constrains integrity of selectedItems data

(accept better suggestions and knowledges)

change selected attribute to your selecteditem of the record of selectedItems, when you choose options, for future purpose.
add new product or remove one, whatever you want to.
choose selected attribute only.

here is screenshot.

enter image description here

here is plunker

here is html.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

  <body ng-controller="mycontroller">
    <div class="item-text-wrap" ng-repeat="items in selectedItems">
        <button class="remove" ng-click="removeChoice(items)">-</button>
        <label class="item item-input item-select">
          <span class="input-label">Product</span>
          <select  ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item, items)"><option style="display:none" value="">select an item</option></select>
        </label>
        <label class="item item-input">
          <span class="input-label">Price</span>
           <input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
        </label>
      </div>
      <button ng-click="addItems()">Add new Product</button> <br>
      {{selectedItems}} <br><br>
      <button ng-click="displaySelectedOnly()" ng-disabled="bool == false">futurepurpose</button> <br>
      {{selectedItemsOnly}}
  </body>

</html>

here is js

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

app.controller('mycontroller', function($scope) {

  $scope.selectedItems = [];
  $scope.items = [{'id':1,'name':'apple', 'price': 100},
  {'id':2,'name':'orange', 'price':75},
  {'id':3,'name':'lemon', 'price':50}]
  $scope.selectedItemsOnly = [];
  $scope.bool = false;

  $scope.toggleChange = function (item, items) {
    angular.forEach(items, function(item){
      if(!angular.isUndefined(item.selected) && item.selected === true){
           item.selected = false;
      } 
    });
    item.selected = true;
    $scope.bool = true;
  };


  $scope.addItems = function (items){
    $scope.selectedItems.push(angular.copy($scope.items));
  }

  $scope.removeChoice = function (items){
    $scope.selectedItems.splice($scope.selectedItems.indexOf(items), 1)
    if($scope.selectedItem.length === 0) $scope.bool = false;
  }

  $scope.displaySelectedOnly = function(){
    angular.forEach($scope.selectedItems, function(items){
        angular.forEach(items, function(item){
          if(!angular.isUndefined(item.selected) && item.selected === true){
            $scope.selectedItemsOnly.push(item);
          } 
        });             
    });

  }

  $scope.addItems($scope.items);

});

Collectives™ on Stack Overflow

add new inputs in angularjs

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related