Question

我有一个下拉列表和一个日历。我已经创建了日历验证指令。现在我想根据所选的下拉项更改指令。

这是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"/>

Angular 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个指令即utilitydate和expdate。当我点击“Utility Bills”选项时，我想将日历更改为utilitydate。

Answer 1

也许你想要的只是一个 ngSwitch ：根据所选的选项，你可以生成一个或另一个指令，然后你可以制作它们＆＃34;指向＆＃34;到同一个 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>

在上面的示例中，指令＆＃34; utilityDate＆＃34;将在 paddress.prooftype 具有值＆＃39;实用程序＆＃39;时使用。否则＆＃34; expDate＆＃34;指令将出现。

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

如何根据下拉列表中的所选项目更改角度js中的指令

1 个答案: