Как изменить директиву в угловых js на основе выбранного элемента из выпадающего

Question

Как изменить директиву в угловых js на основе выбранного элемента из выпадающего

0

У меня есть раскрывающийся список и календарь. Я создал директивы для проверки календаря. Теперь я хочу изменить директиву на выбранном выпадающем элементе.

Вот html

<select class="form-control half" ng-model="address.prooftype">
                                            <option value="" disabled>Select Address Proof</option>
                                            <option value="dl" data-ng-disabled="paddress.prooftype == 'dl'">
                                                Driving License
                                            </option>
                                            <option value="passport"
                                                    data-ng-disabled="paddress.prooftype == 'passport'">
                                                Passport
                                            </option>
                                            <option value="aadharcard"
                                                    data-ng-disabled="paddress.prooftype == 'aadharcard'">
                                                Aadhar Card
                                            </option>
                                            <option value="bankstatement"
                                                    data-ng-disabled="paddress.prooftype == 'bankstatement'">
                                                Bank Statement
                                            </option>
                                            <option value="utilitybills"
                                                    data-ng-disabled="paddress.prooftype == 'utilitybills'">
                                                Utility Bills
                                            </option>
                                            <option value="voteridcard"
                                                    data-ng-disabled="paddress.prooftype == 'voteridcard'">
                                                Voter ID Card
                                            </option>
                                        </select>
                                        <input readonly placeholder="Expiry Date" type='text'
                                               class="btn btn-default form-control half" exp-date
                                               data-ng-model="address.expdate"/>

Угловая директива js

App.directive('utilityDate', function () {
var link = function (scope, element, attrs) {
    var date = new Date();
    date.setDate(date.getDate() - 90);
    var modelName = attrs['ngModel'];
    //console.log(modelName);
    $(element).datepicker(
        {
            endDate: new Date(),
            startDate: date,
            dateFormat: 'dd/mm/yyyy',
            autoclose: true,
            showMonthAfterYear: true,
            showButtonPanel: true,
            startView: 2,
            onSelect: function (dateText) {
                scope[modelName] = dateText;
                scope.$apply();
            }
        });
    $(element).datepicker('setDate', null);
};
return {
    require: 'ngModel',
    restrict: 'A',
    link: link
}});
App.directive('expDate', function () {
    var link = function(scope, element, attrs) {
        var date = new Date();
        date.setDate(date.getDate() + 90);
        var modelName = attrs['datePicker'];
        $(element).datepicker(
            {
                startDate: date,
                dateFormat: 'dd/mm/yyyy',
                autoclose: true,
                showMonthAfterYear: true,
                showButtonPanel: true,
                startView: 2,
                onSelect: function (dateText) {
                    scope[modelName] = dateText;
                    scope.$apply();
                }
            });
    };
    return {
        require: 'ngModel',
        restrict: 'A',
        link: link
    }
});

Существует 2 директивы, а именно: utdate и expdate. Я хочу изменить календарь для утилиты, когда я нажимаю "Утилиты".

saikat mukherjee 16 май 2016, в 16:30

Источник

Теги:

java

html

angularjs

1 ответ

Ещё вопросы

Neozaru · Answer 1 · 2016-05-16T14-00-00.000Z

Возможно, что вы хотите просто ngSwitch: в зависимости от выбранного варианта вы создаете одну или другую директиву, и вы делаете их "указывающими" на ту же ngModel.

<directive ng-switch="paddress.prooftype">
   <directive ng-switch-when="'utilitybills'">
     <input readonly placeholder="Expiry Date" type='text' utility-date data-ng-model="address.expdate"/>
   </directive>
   <directive ng-switch-when="'otherOptionIfNeeded'">...</directive>
   <directive ng-switch-default>
     <input readonly placeholder="Expiry Date" type='text' exp-date data-ng-model="address.expdate"/>
   </directive>
</directive>

В приведенном выше примере директива "shareDate" будет использоваться, когда paddress.prooftype имеет значение "утилиты". В противном случае появится директива expdate.

https://docs.angularjs.org/api/ng/directive/ngSwitch

Его всегда принимает значение по умолчанию exp-date
Попробуйте отладить, вставив {{address.prooftype}} в ваш HTML. (не " р адрес", если я правильно понимаю)
Спасибо, что работал dint нужно включить скобки. :)