Bir nesne dizisinden bir dizi onay kutusu oluşturmaya çalışıyorum. Diziye gönderilecek olan yeni nesnenin bir özelliği ile onay kutularının dinamik olarak kendi ng modelini eşleştirmesini hedefliyorum.
Aklımdaki şey şöyle bir şey
<li ng-repeat="item in items">
<label>{{item.name}}</label>
<input type="checkbox" ng-model="newObject.{{item.name}}">
</li>
Bu, JSFiddle'da görüldüğü gibi çalışmaz:
http://jsfiddle.net/GreenGeorge/NKjXB/2/
Biri yardım edebilir mi?
Yanıtlar:
Bu size istediğiniz sonuçları vermelidir:
<input type="checkbox" ng-model="newObject[item.name]">
İşte çalışan bir bilgi: http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview
item.namebazen işaret etmelidir newObject['x']ve bazen newObject['x']['y'].
DÜZENLEME Bunu ng-değişikliğiyle kullanan yorumlarda doğru bir şekilde belirtildiği gibi, önceden bir "kukla" ng modelinin mevcut olmasını gerektirir. Bununla birlikte, 1.3 ile birlikte gerekli seçeneklerin çerçeve tarafından sağlandığı unutulmamalıdır. Lütfen aşağıdaki https://stackoverflow.com/a/28365515/3497830 adresini kontrol edin ! /DÜZENLE
Daha karmaşık bir göreve sahipken basit bir vakada tökezlediğim gibi, keyfi ifadeleri ng-modeline dinamik olarak bağlamak için bulduğum çözüm budur: http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p = önizleme
Yöntem: Standart bir açısal ifade alan, değerlendiren ve sonucu kapsam ile ng-model ve $ compile ile ilişkilendiren bir dynamicModel yönergesi oluşturdum.
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);
});
}
};
}]);
Kullanım, basitçe dynamic-model = "angularExpression" şeklindedir; burada angularExpression, ng modeli için ifade olarak kullanılan bir dizeyle sonuçlanır.
Umarım bu, birini bu çözümü bulmanın baş ağrısından kurtarır.
Saygılarımızla, Justus
Angular 1.3 ile ng-model-optionsmodeli dinamik olarak atamak veya bir ifadeye bağlanmak için yönergeyi kullanabilirsiniz .
İşte bir 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 }">
ngModelOptionsBurada daha fazla bilgi : https://docs.angularjs.org/api/ng/directive/ngModelOptions
Bu, daha derin ifadeyi destekleme yaklaşımımdır, örneğin 'model.level1.level2.value'
<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">
Burada item.modelPath = 'level1.level2' ve Utility (model, 'level1.level2') model.level1.level2'yi döndüren yardımcı program işlevidir.
<!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>