根据预设变量动态使用 ng-Model
Use ng-Model dynamically based on preset variable
所以我有以下错误:
假设我有以下模型:
Item {
key: string,
name: string,
data: {
sectionA: string,
sectionB: string,
...
sectionZ: string
}
}
我想根据数组 [A-Z] 和循环动态绑定输入文本
房间数 = ["A", "B", ..., "Z"]
<div
class="item"
ng-repeat="room in rooms"
>
<input type="text"
name="{{ item.key }}"
class="form-control"
ng-model="item.data.section"+ room >
</div>
似乎当我循环时,我从 coffeescript 收到关于模型无效的错误,所以我的问题是如何为模型设置正确的值。
如果您使用 item.data.section
,那么这将变为 undefined
,因为您的对象中没有名为 section
的键,然后 ng-model
将是 undefined + room
,结果是 undefined
.
您可以使用 ng-model="item.data['section' + room]"
来指代您的密钥。您在下面有一个工作示例。我添加了一个更新函数来查看 ng-model
绑定是否真的有效。
var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
$scope.item = {
key: "itemKey",
name: "itemName",
data: {
sectionA: "section A String ",
sectionB: "section B String ",
sectionZ: "section Z String "
}
};
$scope.rooms = ['A', 'B', 'Z'];
let i = 0;
$scope.updateValues = function() {
setInterval(function() {
Object.keys($scope.item.data).forEach(key => {
let v = $scope.item.data[key];
v = v.substr(0, v.length - 1) + i;
$scope.item.data[key] = v;
i = (++i) % 10;
});
setTimeout(function() {
$scope.$apply()
}, 0);
}, 1000);
}
$scope.updateValues();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myModule">
<div ng-controller="myController">
<div class="item" ng-repeat="room in rooms">
{{ room }}
<input type="text" name="{{ item.key }}" class="form-control" ng-model="item.data['section' + room]">
</div>
</div>
</div>
干杯!
所以我有以下错误:
假设我有以下模型:
Item {
key: string,
name: string,
data: {
sectionA: string,
sectionB: string,
...
sectionZ: string
}
}
我想根据数组 [A-Z] 和循环动态绑定输入文本
房间数 = ["A", "B", ..., "Z"]
<div
class="item"
ng-repeat="room in rooms"
>
<input type="text"
name="{{ item.key }}"
class="form-control"
ng-model="item.data.section"+ room >
</div>
似乎当我循环时,我从 coffeescript 收到关于模型无效的错误,所以我的问题是如何为模型设置正确的值。
如果您使用 item.data.section
,那么这将变为 undefined
,因为您的对象中没有名为 section
的键,然后 ng-model
将是 undefined + room
,结果是 undefined
.
您可以使用 ng-model="item.data['section' + room]"
来指代您的密钥。您在下面有一个工作示例。我添加了一个更新函数来查看 ng-model
绑定是否真的有效。
var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
$scope.item = {
key: "itemKey",
name: "itemName",
data: {
sectionA: "section A String ",
sectionB: "section B String ",
sectionZ: "section Z String "
}
};
$scope.rooms = ['A', 'B', 'Z'];
let i = 0;
$scope.updateValues = function() {
setInterval(function() {
Object.keys($scope.item.data).forEach(key => {
let v = $scope.item.data[key];
v = v.substr(0, v.length - 1) + i;
$scope.item.data[key] = v;
i = (++i) % 10;
});
setTimeout(function() {
$scope.$apply()
}, 0);
}, 1000);
}
$scope.updateValues();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myModule">
<div ng-controller="myController">
<div class="item" ng-repeat="room in rooms">
{{ room }}
<input type="text" name="{{ item.key }}" class="form-control" ng-model="item.data['section' + room]">
</div>
</div>
</div>
干杯!