تحديث حقل الإدخال بقيمة القائمة المحددة في AngularJS
لتمرير قيمة الخيار المحدد في القائمة إلى ng-model في input، يمكنك استخدام تعبيرات AngularJS للوصول إلى القيمة المناسبة من المصفوفة organizations
التي تم تعريفها في controller الخاص بك. في هذا السياق، يمكنك استخدام ng-change مع ng-model لتعقب التغييرات في القائمة وتحديث قيمة ng-model لل input. النهج هو تعيين قيمة ng-model لتكون نفس القيمة المحددة في القائمة.
فيما يلي كيفية تحقيق ذلك في الكود الخاص بك:
html<div ng-app ng-controller="MyCtrl">
<select ng-model="referral.organization" ng-options="b for b in organizations" ng-change="updateJobDescription()">select>
div>
<script type='text/javascript'>
function MyCtrl($scope) {
$scope.organizations = ['Moo Milk', 'Silver Dairy'];
$scope.referral = {
organization: $scope.organizations[0]
};
$scope.updateJobDescription = function() {
$scope.req_data.job_description = $scope.referral.organization;
};
}
script>
<input name="job_description" onkeypress="return event.keyCode != 13;" ng-model="req_data.job_description" placeholder="Quantity" type="text" />
هذا الكود يقوم بتحديث قيمة job_description
في req_data
عندما يتم تغيير القيمة المحددة في القائمة. يرجى ملاحظة أنه يجب عليك تعريف req_data
في نطاق $scope لكي تعمل هذه العملية بشكل صحيح.
المزيد من المعلومات
بالطبع، هنا بعض المعلومات الإضافية حول كيفية تمرير القيمة من القائمة إلى الحقل المدخل:
-
في المثال السابق، قمت بتعريف دالة
updateJobDescription
في controller لتحديث قيمةjob_description
عندما يتم تغيير القيمة المحددة في القائمة. هذا يضمن أنه عندما يتم تحديد منظمة معينة من القائمة، سيتم تحديث قيمةjob_description
تلقائيًا لتكون نفس القيمة. -
يمكنك أيضًا استخدام
ng-model
مع الحقل المدخل لربطه مباشرة بالقيمة المحددة في القائمة. على سبيل المثال، يمكنك تغيير الحقل المدخل كما يلي:html<input name="job_description" onkeypress="return event.keyCode != 13;" ng-model="referral.organization" placeholder="Quantity" type="text" />
في هذه الحالة، سيكون الحقل المدخل مرتبطًا مباشرة بقيمة
organization
فيreferral
، وسيتم تحديثه تلقائيًا عندما يتم تغيير القيمة في القائمة. -
يمكنك أيضًا استخدام
ng-change
لتنفيذ دالة معينة عندما يتم تغيير القيمة في القائمة. هذا يمكن أن يكون مفيدًا إذا كانت هناك حاجة لتنفيذ بعض العمليات الإضافية عندما يتم تغيير القيمة، بغض النظر عن تحديث الحقل المدخل.