Saya ingin mengisi formulir dengan beberapa pertanyaan dinamis (biola di sini ):
<div ng-app ng-controller="QuestionController">
<ul ng-repeat="question in Questions">
<li>
<div>{{question.Text}}</div>
<select ng-model="Answers['{{question.Name}}']" ng-options="option for option in question.Options">
</select>
</li>
</ul>
<a ng-click="ShowAnswers()">Submit</a>
</div>
function QuestionController($scope) {
$scope.Answers = {};
$scope.Questions = [
{
"Text": "Gender?",
"Name": "GenderQuestion",
"Options": ["Male", "Female"]},
{
"Text": "Favorite color?",
"Name": "ColorQuestion",
"Options": ["Red", "Blue", "Green"]}
];
$scope.ShowAnswers = function()
{
alert($scope.Answers["GenderQuestion"]);
alert($scope.Answers["{{question.Name}}"]);
};
}
Semuanya bekerja, kecuali modelnya adalah Jawaban ["{{question.Name}}"], bukan Jawaban yang dievaluasi ["GenderQuestion"]. Bagaimana cara menyetel nama model itu secara dinamis?
ng-pattern="field.pattern"
ketika apa yang sebenarnya saya inginkanpattern="{{field.pattern}}"
. Agak membingungkan bahwa angular biasanya menyediakan penolong untuk atribut dinamis tetapi kali ini menulis validasi sisi kliennya sendiri dan memberinya nama yang sama.Anda dapat menggunakan sesuatu seperti ini
scopeValue[field]
, tetapi jika bidang Anda ada di objek lain, Anda memerlukan solusi lain.Untuk mengatasi semua jenis situasi, Anda dapat menggunakan arahan ini:
this.app.directive('dynamicModel', ['$compile', '$parse', function ($compile, $parse) { return { restrict: 'A', terminal: true, priority: 100000, link: function (scope, elem) { var name = $parse(elem.attr('dynamic-model'))(scope); elem.removeAttr('dynamic-model'); elem.attr('ng-model', name); $compile(elem)(scope); } }; }]);
Contoh HTML:
<input dynamic-model="'scopeValue.' + field" type="text">
sumber
ng-model="{{ variable }}"
:)Apa yang akhirnya saya lakukan adalah seperti ini:
Di pengontrol:
link: function($scope, $element, $attr) { $scope.scope = $scope; // or $scope.$parent, as needed $scope.field = $attr.field = '_suffix'; $scope.subfield = $attr.sub_node; ...
jadi di template saya bisa menggunakan nama yang benar-benar dinamis, dan tidak hanya di bawah elemen hard-code tertentu (seperti dalam kasus "Answers"):
<textarea ng-model="scope[field][subfield]"></textarea>
Semoga ini membantu.
sumber
Untuk membuat jawaban yang diberikan oleh @abourget lebih lengkap, nilai scopeValue [field] di baris kode berikut bisa tidak ditentukan. Ini akan menghasilkan kesalahan saat mengatur subbidang:
<textarea ng-model="scopeValue[field][subfield]"></textarea>
Salah satu cara untuk memecahkan masalah ini adalah dengan menambahkan atribut ng-focus = "nullSafe (field)", sehingga kode Anda akan terlihat seperti di bawah ini:
<textarea ng-focus="nullSafe(field)" ng-model="scopeValue[field][subfield]"></textarea>
Kemudian Anda mendefinisikan nullSafe (field) dalam pengontrol seperti di bawah ini:
$scope.nullSafe = function ( field ) { if ( !$scope.scopeValue[field] ) { $scope.scopeValue[field] = {}; } };
Ini akan menjamin bahwa scopeValue [bidang] tidak ditentukan sebelum menyetel nilai apa pun ke scopeValue [bidang] [subbidang].
Catatan: Anda tidak dapat menggunakan ng-change = "nullSafe (field)" untuk mendapatkan hasil yang sama karena ng-change terjadi setelah ng-model diubah, yang akan memunculkan kesalahan jika scopeValue [field] tidak ditentukan.
sumber
Atau Anda bisa menggunakan
<select [(ngModel)]="Answers[''+question.Name+'']" ng-options="option for option in question.Options"> </select>
sumber