Add the item and increase its value within an array using AngularJS

Question

Add the item and increase its value within an array using AngularJS

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

<button ng-click="addRow()">add row</button>

<div ng-repeat="row in rows">
<input type="text" placeholder="name"><input type="tel" placeholder="tel">
</div>

I am currently facing an issue while trying to add new rows and saving the fields. I need help with figuring out how to determine the current number of rows and incrementing to push into the array.

javascript angularjs

Answer 1

Answer №1

Check out this unique demonstration I designed that enables the creation of up to eight distinct input fields for Telephone and Text Entries.

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
$scope.rows = [];
  
var Row = function(tel, text) {
  // Private data
  var private = {
    tel: tel,
    text: text
  }

  // Expose public API
  return {
    get: function( prop ) {
      if ( private.hasOwnProperty( prop ) ) {
        return private[ prop ];
      }
    }
  }
};

  $scope.addRow = function(){
    
    if($scope.rows.length < 8){
      var newItemNum = $scope.rows.length + 1;
      var row = new Row('item' + newItemNum, 'item' + newItemNum);
      
      $scope.rows.push(row);
    }
  };
  
  $scope.saveAll = function(){
  //  $scope.result = 'something';
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">

      <h2>Setting</h2>
      <button ng-click="addRow()">Add Row</button>
      <br />
    
      <div ng-repeat="row in rows">
        <input type="text" placeholder="Text" ng-model="row.textModel" >
        <input type="tel" placeholder="Phone" ng-model="row.telModel" >
      </div>
    
      <br />
      {{rows}}
</div>
</div>

Answer 2

Check out this unique demonstration I designed that enables the creation of up to eight distinct input fields for Telephone and Text Entries.

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
$scope.rows = [];
  
var Row = function(tel, text) {
  // Private data
  var private = {
    tel: tel,
    text: text
  }

  // Expose public API
  return {
    get: function( prop ) {
      if ( private.hasOwnProperty( prop ) ) {
        return private[ prop ];
      }
    }
  }
};

  $scope.addRow = function(){
    
    if($scope.rows.length < 8){
      var newItemNum = $scope.rows.length + 1;
      var row = new Row('item' + newItemNum, 'item' + newItemNum);
      
      $scope.rows.push(row);
    }
  };
  
  $scope.saveAll = function(){
  //  $scope.result = 'something';
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">

      <h2>Setting</h2>
      <button ng-click="addRow()">Add Row</button>
      <br />
    
      <div ng-repeat="row in rows">
        <input type="text" placeholder="Text" ng-model="row.textModel" >
        <input type="tel" placeholder="Phone" ng-model="row.telModel" >
      </div>
    
      <br />
      {{rows}}
</div>
</div>

Answer 3

Answer №2

Transfer the functions to be housed within controller 'Ctrl'.

Within your script:

function Ctrl($scope) {
    $scope.result = "something";
    $scope.rows = ['1'];

    $scope.addRow = function(){
        if ($scope.rows.length < 8) {
            $scope.rows.push($scope.rows.length + 1);
        }
    }

    $scope.saveAll = function(){
    //  $scope.result = 'something';
    }
}

Answer 4

Transfer the functions to be housed within controller 'Ctrl'.

Within your script:

function Ctrl($scope) {
    $scope.result = "something";
    $scope.rows = ['1'];

    $scope.addRow = function(){
        if ($scope.rows.length < 8) {
            $scope.rows.push($scope.rows.length + 1);
        }
    }

    $scope.saveAll = function(){
    //  $scope.result = 'something';
    }
}

Add the item and increase its value within an array using AngularJS

Answer №1

Answer №2

Similar questions

Perform activities within a component responsible for displaying a flatlist

combining input fields for editing as a single unit instead of individually

Need to monitor a Firebase table for any updates

Looking to retrieve data using Cheerio? If you're finding that the data appears empty in the page source but is visible when inspecting the elements, here's how you can go

A Complication Arises with Browser Functionality When Embedding an Iframe within

Issue with angularjs ui.router delaying the rendering of ui-view

Deactivate input areas while choosing an option from a dropdown menu in HTML

Designing a file upload progress bar with the help of jquery and ajax

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

Error Encountered: Unhandled Runtime Error in Next.js with Firebase - TypeError: Unable to access the property 'initializeApp' as it is undefined

What is the best way to incorporate my CSS file into an HTML file when using Express?

My React app experienced a severe crash when trying to render an animation in L

Is it possible to save round items within a session?

Building a DOM element using jQuery

Obtaining the TemplateRef from any HTML Element in Angular 2

Tips for eliminating repetitive code in JavaScript

Incorporating arguments within the context of a "for each" loop

apply styling to the placeholder with CSS

Executing Scripts within the Browser: A Guide to Using Selenium

Angular's import and export functions are essential features that allow modules