كيفية الوصول إلى الخيار المحدد من وحدة التحكم عند النقر فوق الزر في angularjs؟

Question

لدي حقل محدد مع ng-model السمة في علامة تبويب ضمن مجموعة علامات التبويب ui-bootstrap.يوجد أيضًا زر في علامة التبويب.عند النقر على الزر، أرغب في الحصول على القيمة المحددة في النموذج.حاولت استخدام

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick()">Click</button>

ومن ثم في وحدة التحكم

$scope.buttonClick = function() {
  //try to access $scope.selectedOption
}

ولكن لا يبدو أن هذا يحتوي على القيمة.حاولت النظر في $scope متغير ويبدو أنه يحتوي على selectedOption داخل شيء يسمى $$childTail

هل هناك أي طريقة أخرى للوصول إلى قيمة الخيار المحدد أو هل يجب علي تغيير بنية طريقة العرض الخاصة بي؟

انا املك الغطاس هنا لما أحاول القيام به.

Answer 1

يجب أن تكون إجابات كل من Mathew Berg وBumblebee Man ناجحة، لكنها لا تشرح ما يحدث.

حسنًا ، في الأساس يتم النزول على النحو التالي:

توجيه tabset الذي تستخدمه يفعل ذلك transclusion لذا فإن الخيار المحدد موجود بالفعل في نطاق داخلي (نطاق مجموعة علامات التبويب)، وليس في نطاق TabsDemoCtrl الخاص بك. هذه الإجابة يشرح ما يفعله الاستبعاد، وكيف يمكنك الوصول إلى النموذج المضمن.

يقوم التضمين بعمل نسخ سطحية من نماذجك، لذلك حتى لو قمت ببدء الخيار المحدد مثل $scope.selectedOption = "5"; في TabsDemoCtrl الخاص بك، سيُظهر تحديدك 5 كما هو محدد في البداية ولكن لن تنعكس التغييرات على نطاق وحدة تحكم TabsDemoCtrl الخاصة بك لأنه في النطاق الفرعي لمجموعة علامات التبويب، يتم نسخ 5 للتو، والنطاق الذي يتم تحديثه موجود في نطاق مجموعة علامات التبويب وليس نطاقك.

يمكنك أيضًا استخدام كائن للنموذج الذي حددته.نظرًا لأن التضمين ينشئ نسخة سطحية، يتم نسخ الكائنات/المصفوفات/الوظائف حسب المرجع ويتم نسخ المتغيرات حسب القيمة.ولهذا السبب أيضًا يمكنك الوصول إلى زر TabsDemoCtrl الخاص بك بالنقر فوق من النطاق الداخلي.

تم تحديث plnkr بحل بديل آخر (إصدار الكائن):

إنشاء كائن في وحدة التحكم الخاصة بك

$scope.selection = {};

وتستخدم في نموذج مثل هذا

ng-model="selection.option"

http://plnkr.co/edit/5sI0arorV9dULzaDxRra?p=preview

Answer 2

ينشئ توجيه علامة التبويب/مجموعة علامات التبويب Angular نطاقات جديدة، لذا من أجل الوصول إلى النطاق الأصلي (ما تحاول القيام به) ما عليك سوى إرفاق $parent

<select name="selectedCampaign" ng-model="$parent.selectedOption" ng-options="option for option in options"></select>

تم تحديث المكبس: http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N

Answer 3

يحرر:عذرًا، لقد أخطأت في قراءة السؤال، ألا يمكنك فعل ذلك؟ هذا?

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick(selectedOption)">Click</button>

$scope.buttonClick = function(selectedOption) {
  selectedOption.whatever...
}