آفلاین
user-avatar

بایند کردن در radioButton

2 سال پیش
توسط سید محمد حسین موسوی آپدیت شد
آفلاین
user-avatar
سید رضا موسوی ( 6567 تجربه )
2 سال پیش
تخصص : برنامه

سلام
تفاوت ngValue با ngModel در انگولار چیست؟


<input type="radio" ng-model="color.name" value="red"  ng-value="specialValue" />
آفلاین
user-avatar
سید محمد حسین موسوی ( 18643 تجربه )
2 سال پیش
تخصص : FullStack Developer

فرض کن یه همچین چیزی داری:

$scope.instructor = {
    isActive: true,
    course: 'chemistry'
};

و دوتا input هم تو صفحه داری به این صورت:

<input type="radio" name="course" value="physics" ng-model="instructor.course"/> Physics
<input type="radio" name="course" value="chemistry" ng-model="instructor.course"/>  Chemistry

اگر امتحانش کنی متوجه می شی که اگر مقدار value برابر با ng-model باشه، اون radio انتخاب می شه. منطقش می شه مثل کد زیر:
if value == ng-mode => radio checked

حالا اگر همچین کدی رو تست کنیم:

<input type="radio" name="status" value="true" ng-model="instructor.isActive"/> Active
<input type="radio" name="status" value="false" ng-model="instructor.isActive"/>  Inactive

اینجا هم انتظار داریم که radio اول انتخاب بشه چون مقدار value برابر با "true" هست و ng-model ما هم در اولی مقدار true رو بر می گردونه. ولی جرا مثل مثال قبلی کار نمی کنه؟
به خاطر اینه که مقداری که ng-model داره برمی گردونه با مقدار value نوعشون متفاوته! یعنی نوع value بصورت string هست ولی model بصورت boolean پس از نظر ساختاری فرق دارن. به همین منظور باید یه راهکاری پیدا کنیم که این مشکل پیش نیاد. برای حلش ما می تونیم از ng-value تو radio و checkbox ها استفاده کنیم.
در یک جمله کاری ng-value برای ما می کنه اینه که مقدار string رو به boolean تبدیل می کنه

برای ارسال پاسخ باید وارد سایت شوید