Angularjs는 입력 드롭다운 상자 구성 요소를 사용자 정의합니다(코드 예)

다음 문서에서는 Angularjs입력 드롭다운 상자 구성 요소를 사용자 정의하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 권장 사항: "angularjs Tutorial"

Anglejs에서 입력 드롭다운 상자 구성 요소를 사용자 정의합니다. 구성 요소의 생성 및 소개는 다음과 같습니다.

새 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>

지시문 맞춤 지침

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

페이지에 insertSelect 구성 요소가 소개됩니다

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

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 튜토리얼! !

위 내용은 Angularjs는 입력 드롭다운 상자 구성 요소를 사용자 정의합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!