输入类型的ng-model值= ng-repeat AngularJS中的数字(ng-model value from input type=number inside ng-repeat AngularJS)
我尝试从输入数字中控制表.log中的每个值，但我只收到10 - 在script.js中分配的值。 我不想在console.log那个值，你在输入数字中选择。 我的plunker： http ：//plnkr.co/edit/g1t4pludTTIAJYKTToCK？p = preview
代码：
<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>提前谢谢你的答案！
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!
最满意答案
您可以像n.value一样为ng-repeat添加属性。 现在，数组的每个对象都将包含一个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>
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>
更多推荐
log,value,电脑培训,计算机培训,IT培训"/> <meta name="description" c
发布评论