2016-06-23 2 views
0

У меня есть два выпадающих списка с одинаковой проблемой. мой вызов, когда я выбираю 1, выбирается другой. Кроме того, если есть ошибка проверки, она выдает только одно выпадающее меню. Что мне не хватает?Угловое - два выпадающих списка с одним источником данных

<div class="form-group"> 
        <label for="ctctype_id"> 
         Current CTC 
        </label> 
        <select class="form-control" name="ctctype_id" id="ctctype_id" data-ng-model="formJobApplyData.salary_range" 
          data-ng-options="salary.key for salary in salaryList" data-validate-selected-keyvalue></select> 
       </div> 

       <div data-ng-messages="jobForm.ctctype_id.$error" data-ng-show="jobForm.ctctype_id.$invalid && (jobForm.ctctype_id.$touched || jobForm.ctctype_id.$dirty)" class="form-message"> 
        <p data-ng-message="validselectedkeyvalue"> 
         Please select your current CTC from the list 
        </p> 
       </div> 

       <div class="form-group"> 
        <label for="exptype_id"> 
         Expected CTC 
        </label> 
        <select class="form-control" name="expctc_id" id="expctc_id" data-ng-model="formJobApplyData.salary_range" 
          data-ng-options="salary.key for salary in salaryList" data-validate-selected-keyvalue></select> 
       </div> 

       <div data-ng-messages="jobForm.expctc_id.$error" data-ng-show="jobForm.expctc_id.$invalid && (jobForm.expctc_id.$touched || jobForm.expctc_id.$dirty)" class="form-message"> 
        <p data-ng-message="validselectedkeyvalue"> 
         Please select your expected CTC from the list 
        </p> 
       </div> 

Мой Javascript Valiation:

app.directive('validateSelectedKeyvalue', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, elem, attr, ctrl) { 
      ctrl.$validators.validselectedkeyvalue = function (viewValue) { 
       if (typeof (viewValue) != 'undefined') { 
        return ((typeof (viewValue.id) != 'undefined') && viewValue.id != 0) ? true : false; 
       } 
       else { return true; } 
      } 
     } 
    }; 
}); 
+3

В чем смысл двух прямоугольников, привязанных к одному и тому же ngModel? Или это проблема? У вас не должно быть двух ящиков с одной и той же ng-моделью. Кроме того, не ваш валидатор в основном то же самое, что и 'required'? –

+0

Как вы можете видеть ... они служат двум различным целям - нужно запросить текущую зарплату и другую для ожидаемой зарплаты. Список тот же. Я могу создать две ng-модели. но он будет повторяться. –

+2

Если они обслуживают разные куклы, то они должны быть связаны с разными переменными. Вы не можете хранить две разные зарплаты в одной переменной зарплаты. Вам нужна переменная для текущей зарплаты, а другая для ожидаемой зарплаты. –

ответ

1

Причина одна выпадающий меняется другой, потому что они связаны с одной и той же области видимости переменной.

data-ng-model="formJobApplyData.salary_range" 

Я бы предложил сделать один formJobApplyData.current_salary и один formJobApplyData.expected_salary.

Это также имеет смысл, что проверяется только одно поле. Это связано с тем, что только одно значение действительно выбрано.

+0

Спасибо Sensok. Это то, что я догадывался. Я думал, что смогу повторно использовать ту же модель для обоих. Wil создает два отдельных объекта –

+0

angular.copy отлично справляется с этим. –

+0

@AmyBlankenship - Это помогло бы, если бы они использовали две копии одних и тех же источников данных в ng-вариантах. Но где данные должны быть двух разных моделей, вы не хотите использовать угловую.копию. Вы можете использовать один и тот же источник данных для нескольких выпадающих меню. – SenSok