ng-model value from input type=number inside ng-repeat AngularJS

Question

I try to console.log each value in table from input number, but i received only 10 - value assigned in script.js. I wan't to console.log that value, you choose in input number. My plunker: http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

Code :

 <table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>System </th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="n in data">
            <td style="word-break:break-all;">{{n.name}}</td>
            <td>{{n.system}}</td>
            <td>
                <input class="form-control input-sm" type="number"
                       name="input" ng-model="value" min="0" max="100">
            </td>
            <td>
                <button ng-click="postvalue()">Value</button>
            </td>
        </tr>
    </tbody>
</table>

Thanks for answers in advance!

Add a value property to each of your objects, and bind your input to the value of the current object: n.value. — JB Nizet
– JB Nizet, Commented Aug 29, 2017 at 6:45

georgeawg · Accepted Answer · 2017-08-29 07:34:58Z

2

You can add a property to your ng-repeat like n.value. Now each object of your array will contain a value property which will hold the input value

// Code goes here
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
    $scope.data = [{
        "name": "Tiger Nixon",
        "system": "System Architect"
    }, {
        "name": "Tiger Nixon",
        "system": "System Architect"
    }, {
        "name": "Tiger Nixon",
        "system": "System Architect"
    }, {
        "name": "Tiger Nixon",
        "system": "System Architect"
    }, {
        "name": "Tiger Nixon",
        "system": "System Architect"
    }];
    $scope.postvalue = function(n) {
        console.log(n.value);
    };
});

<html ng-app="app" ng-cloak>

<head>
    <style>
        [ng\:cloak],
        [ng-cloak],
        [data-ng-cloak],
        [x-ng-cloak],
        .ng-cloak,
        .x-ng-cloak {
            display: none !important;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body ng-controller="FirstCtrl as vm">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name
                    <th>System </th>
                    <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="n in data">
                <td style="word-break:break-all;">{{n.name}}</td>
                <td style="width:35px;">{{n.system}}</td>
                <td>
                    <input class="form-control input-sm" type="number"
                           name="input" ng-model="n.value" min="0"
                           max="100" style="width:55px;">
                </td>
                <td>
                    <button ng-click="postvalue(n)">Value</button>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

edited Aug 29, 2017 at 7:34

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Aug 29, 2017 at 6:48

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

3 Comments

bafix2203 Over a year ago

Thanks, Have you got an idea for an early assigned value to 10 in each input?

bafix2203 Over a year ago

Ok, i use ng-init

Vivz Over a year ago

Yes, you can use ng-init to initialise your inputs to 10 or loop through your array of objects in js to create a value property which will be initialised to 10.

georgeawg · Accepted Answer · 2017-08-29 07:33:23Z

1

Yes, because you have set $scope.value to 10. If you want to initially set text box value to 10 then use ng-init.

<input class="form-control input-sm" type="number" name="input"
       ng-model="value" ng-init="value=10" min="0" max="100">

edited Aug 29, 2017 at 7:33

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Aug 29, 2017 at 6:50

Nikita

4372 silver badges12 bronze badges

Comments

user1608841 · Accepted Answer · 2017-08-29 06:49:12Z

You need to pass ng-model="value" inside your postValue function like below:

// Code goes here

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
  
    $scope.data=[
            {
                "name" : "Tiger Nixon",
                "system" : "System Architect"
            },
            {
                "name" : "Tiger Nixon",
                "system" : "System Architect"
            },
            {
                "name" : "Tiger Nixon",
                "system" : "System Architect"
            },
            {
                "name" : "Tiger Nixon",
                "system" : "System Architect"
            },
            {
                "name" : "Tiger Nixon",
                "system" : "System Architect"
            }
        ];
        $scope.value = 10;
    $scope.postvalue = function(value){
      console.log(value);
    };
    
     

     
});

<html ng-app="app" ng-cloak>

<head>
  <style>
    [ng\:cloak],
    [ng-cloak],
    [data-ng-cloak],
    [x-ng-cloak],
    .ng-cloak,
    .x-ng-cloak {
      display: none !important;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


  <script src="script.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body ng-controller="FirstCtrl as vm">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name
          <th>System
          </th>
          <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="n in data">
        <td style="word-break:break-all;">{{n.name}}</td>

        <td style="width:35px;">{{n.system}}</td>
        <td>
          <input class="form-control input-sm" type="number" name="input" ng-model="value" min="0" max="100" style="width:55px;">
        </td>
        <td>
          <button ng-click="postvalue(value)">Value</button>
        </td>

      </tr>
    </tbody>
  </table>

</body>

</html>

Kunvar Singh · Accepted Answer · 2017-08-29 06:51:59Z

0

you can try following: in HTML file change it:

 <td><button ng-click="postvalue(n)">Value</button></td>



   $scope.postvalue = function(n){
     $scope.data.filter(function(data){
    if(n.name==data.name){
    console.log("Name:"+n.name);
    return n.name;
    }
    });

May this help for you:

answered Aug 29, 2017 at 6:51

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

Collectives™ on Stack Overflow

ng-model value from input type=number inside ng-repeat AngularJS

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related