我正在尝试从对象数组生成一组复选框。我的目标是使复选框动态地将其ng模型映射到将要提交到数组中的新对象的属性。
我的想法是
<li ng-repeat="item in items">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="newObject.{{item.name}}">
</li>
在此JSFiddle上可以看到，这不起作用：
http://jsfiddle.net/GreenGeorge/NKjXB/2/
有人可以帮忙吗？
Answers:
item.name有时应该指出newObject['x']，有时到newObject['x']['y']。
编辑 正如注释中正确指出的那样，将其与ng-change一起使用需要事先存在“虚拟” ng-model。但是，应该指出的是，显然在1.3中，框架已经提供了所需的选项。请在下面查看https://stackoverflow.com/a/28365515/3497830！ /编辑
以防万一您像我一样在执行更复杂的任务时绊倒一个简单的案例，这是我想出的将任意表达式动态绑定到ng-model的解决方案：http : //plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p =预览
方法：我创建了一个指令dynamicModel，该指令采用一个标准的角度表达式，对其进行求值并将结果通过ng-model和$ compile链接到范围。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {};
$scope.testvalue = 'data.foo';
$scope.eval = $scope.$eval;
});
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {};
$scope.testvalue = 'data.foo';
$scope.eval = $scope.$eval;
});
app.directive('dynamicModel', ['$compile', function ($compile) {
return {
'link': function(scope, element, attrs) {
scope.$watch(attrs.dynamicModel, function(dynamicModel) {
if (attrs.ngModel == dynamicModel || !dynamicModel) return;
element.attr('ng-model', dynamicModel);
if (dynamicModel == '') {
element.removeAttr('ng-model');
}
// Unbind all previous event handlers, this is
// necessary to remove previously linked models.
element.unbind();
$compile(element)(scope);
});
}
};
}]);
用法只是dynamic-model =“ angularExpression”，其中angularExpression会产生一个字符串，该字符串用作ng-model的表达式。
我希望这可以避免某人不得不提出此解决方案的麻烦。
问候，Justus
在Angular 1.3中，您可以使用ng-model-options指令动态分配模型或绑定到表达式。
这是一个插件：http ://plnkr.co/edit/65EBiySUc1iWCWG6Ov98?p=preview
<input type="text" ng-model="name"><br>
<input type="text" ng-model="user.name"
ng-model-options="{ getterSetter: true }">
ngModelOptions此处的更多信息：https : //docs.angularjs.org/api/ng/directive/ngModelOptions
这是我支持更深层表达的方法，例如'model.level1.level2.value'
<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">
其中item.modelPath ='level1.level2'和Utility（model，'level1.level2'）是返回model.level1.level2的实用函数
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="priceForm" ng-submit="submitPriceForm()">
<div ng-repeat="x in [].constructor(9) track by $index">
<label>
Person {{$index+1}} <span class="warning-text">*</span>
</label>
<input type="number" class="form-control" name="person{{$index+1}}" ng-model="price['person'+($index+1)]" />
</div>
<button>Save</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.price = [];
$scope.submitPriceForm = function () {
//objects be like $scope.price=[{person1:value},{person2:value}....]
console.log($scope.price);
}
});
</script>
</body>
</html>