Angularjs personnalise un composant de liste déroulante d'entrée (exemple de code)-js tutoriel-php.cn

Angularjs personnalise un composant de liste déroulante d'entrée (exemple de code)

青灯夜游

Libérer： 2021-02-01 11:46:30

avant

2787 Les gens l'ont consulté

L'article suivant vous présentera comment personnaliser un composant de liste déroulante de saisie dans Angularjs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Angularjs personnalise un composant de liste déroulante d'entrée (exemple de code)

Recommandations associées : "Tutoriel Angularjs"

Personnalisez un composant de liste déroulante d'entrée dans Angularjs, puis créez le composant et présenté comme suit.

Nouveau fichier insertSelect.html

<style type="text/css">
    .insert-select {
        position: relative;
    }
 
    .input-box {
        position: absolute;
        height: calc(100% - 4px);
        width: calc(100% - 25px);
        top: 2px;
        left: 2px;
        padding-left: 10px;
        outline: none !important;
        border-radius: 4px !important;
        border: none !important;
    }
 
</style>
 
<!--可输入下拉框-->
<div class="insert-select">
    <select ng-attr-placeholder="{{placeholder}}" class="form-control"
            chosen ng-model="modelData"
            ng-options="item for item in optionList">
        <option value=""></option>
    </select>
 
    <input type="text" class="input-box"
           ng-attr-placeholder="{{placeholder}}"
           ng-model="modelData">
</div>

Copier après la connexion

directive Directive personnalisée

//可输入select框
angular.module("controllers")
.directive("insertSelect", [function () {
    return {
        restrict: &#39;AE&#39;,
        templateUrl: &#39;template/common/insertSelect.html&#39;,
        scope: {
            modelData: &#39;=modelData&#39;,        
            optionList: &#39;=optionList&#39;,     
            placeholder: &#39;=placeholder&#39;,    //placeholder 可由引入页面传入
        },
        link: function ($scope, $elem) {
            //
        },
        controller: ["$scope", function ($scope) {
 
        }]
    }
}]);

Copier après la connexion

La page présente le composant insertSelect

<insert-select model-data="formData"
               option-list="successCodeList"
               placeholder="&#39;请选择&#39;">
</insert-select>

Copier après la connexion

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!