ng-model输入类型的值= ng-repeat中的数字AngularJS

我尝试从输入号码中console.log表中的每个值，但我只收到10 - script.js中分配的值。我不想console.log这个值，你在输入数字中选择。我plunker：http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview ng-model输入类型的值= ng-repeat中的数字AngularJS

代码：

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

感谢提前答案！

来源

2017-08-29 bafix2203

值属性添加到您的每一个对象，并且您输入绑定当前对象的值：'n.value'。 –

你可以添加一个属性到你的ng重复像n.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>

来源

2017-08-29 06:48:32 Vivz

谢谢，你有没有想过在每个输入中提前分配10个值？ – bafix2203

好的，我使用ng-init – bafix2203

是的，您可以使用ng-init将您的输入初始化为10或循环遍历js中的对象数组以创建一个将被初始化为10的值属性。 – Vivz

您需要通过ng-model="value"您postValue函数中象下面这样：

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

来源

2017-08-29 06:49:12 Rahul

是的，因为你已经设置了$scope.value为10.如果您想将文本框初始值设置为10，则使用ng-init。

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

来源

2017-08-29 06:50:57 Nikita

你可以尝试以下操作：在HTML文件中的变化它：

<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; 
    } 
    });

愿这帮助你：

来源

2017-08-29 06:51:59

ng-model输入类型的值= ng-repeat中的数字AngularJS

回答

相关问题