Tôi đang cố tạo một tập hợp các hộp kiểm từ một mảng đối tượng. Tôi đang hướng tới việc các hộp kiểm tự động ánh xạ ng-model của chúng tới một thuộc tính của đối tượng mới sẽ được gửi vào mảng.
Những gì tôi đã nghĩ đến là một cái gì đó như
<li ng-repeat="item in items">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="newObject.{{item.name}}">
</li>
Điều này không hoạt động như có thể thấy trên JSFiddle này:
http://jsfiddle.net/GreenGeorge/NKjXB/2/
Ai có thể giúp đỡ?
Câu trả lời:
Điều này sẽ cung cấp cho bạn kết quả mong muốn:
<input type="checkbox" ng-model="newObject[item.name]">
Đây là một plunk đang hoạt động: http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview
item.nameđôi khi nên trỏ tới newObject['x']và đôi khi tới newObject['x']['y'].
CHỈNH SỬA Như đã lưu ý chính xác trong các nhận xét sử dụng điều này với ng-change, yêu cầu một ng-model "dummy" phải có trước. Tuy nhiên, cần lưu ý rằng rõ ràng với 1.3, các tùy chọn bắt buộc đã được cung cấp bởi khuôn khổ. Vui lòng kiểm tra https://stackoverflow.com/a/28365515/3497830 bên dưới! /BIÊN TẬP
Đề phòng trường hợp bạn giống như tôi vấp phải một trường hợp đơn giản trong khi có một nhiệm vụ phức tạp hơn, đây là giải pháp mà tôi đưa ra để liên kết động các biểu thức tùy ý với ng-model: http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p = xem trước
Phương pháp: Tôi đã tạo một dynamicModel chỉ thị lấy một biểu thức góc chuẩn, đánh giá nó và liên kết kết quả với phạm vi thông qua ng-model và $ 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);
});
}
};
}]);
Cách sử dụng đơn giản là dynamic-model = "angleExpression" trong đó angleExpression dẫn đến một chuỗi được sử dụng làm biểu thức cho ng-model.
Tôi hy vọng điều này giúp ai đó đỡ đau đầu khi phải nghĩ ra giải pháp này.
Trân trọng, Justus
Với Angular 1.3, bạn có thể sử dụng ng-model-optionschỉ thị để gán động mô hình hoặc liên kết với một biểu thức.
Đây là một plunkr: 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 }">
Thông tin thêm tại ngModelOptionsđây: https://docs.angularjs.org/api/ng/directive/ngModelOptions
Đây là cách tiếp cận của tôi để hỗ trợ biểu thức sâu hơn, ví dụ: 'model.level1.level2.value'
<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">
trong đó item.modelPath = 'level1.level2' và Utility (model, 'level1.level2') là hàm tiện ích trả về 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>