我正在尝试使用 ng-repeat 来干燥我的 html。使用以下代码:
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="expense" />
</div>
</div>
我遇到的问题是试图连接到 ng-model 中的“费用”。我想添加 key 。
IE:ng-model="expense.{{key}}" 但这不起作用。
建议？
谢谢!
最佳答案
您可以提供 ng-model = value 或者您可以提供 ng-model=expense[key]
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.expense = {
cost: 1,
basic: 2
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="value" />
</div>
</div>
</body>
</html>var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.expense = {
cost: 1,
basic: 2
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="expense[key]" />
</div>
</div>
</body>
</html>关于javascript - AngularJS 拼接模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28679048/