AngularJS-用下拉菜单填充输入文本字段

AngularJS - Fill input text field with dropdown menu

本文关键字：文本 字段 输入 填充 下拉菜单 AngularJS-      更新时间：2024-02-16

如何用下拉菜单填充输入文本字段？

文本输入：

<input type="text" ng-model="storagePlaceModel" lms-dropdown class="form-control lms-input-text-disable lms-dropdown-toggle" id="storagePlace" placeholder="Standort" autocomplete="off" readonly>

自己写的下拉列表：

<div class="lms-dropdown">
    <div class="lms-dropdown-scrollbar">
        <li ng-repeat="data in data_input_fields.input_cat_music_book_storage_place">
            <span>{{data.input_value}}</span>
            <i ng-show="storagePlaceModel == data.input_value" class="glyphicon glyphicon-ok"></i>
        </li>
    </div>
</div>

如果我选择一个li元素，我想用li值更新storagePlaceModel。

更新的问题：因为我有不止一个带有下拉菜单的文本输入，所以我需要一个conroller/指令不知道确切型号名称的解决方案。

指令可能看起来像：

lmsApp.directive('updateInputField', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            $(elem).click(function(e) {
                // Read out the model name of the html text input field
            });
        }
    };
});

谢谢你的帮助！我将感谢每一个答案。

我编辑了整个问题，创建了一个指令来包装您想要的结构。你将把你想要的模型传递给指令，这样，每个模型都将独立于不同的指令用法：

myApp.directive('myDirective', function() {
    return {
        restrict: "E",
        scope: {
            model: "=",
            datas: "="
        },
        templateUrl: "directive.html",
        link: function(scope, element, attr) {
            scope.updateValue = function(val) {
                scope.model.storagePlaceModel = val;
            }
        }
    }
});

directive.html包含您的文本输入和下拉列表。

控制器：

function MyCtrl($scope) {
    $scope.wrapper = {};
    $scope.wrapper2 = {};
    $scope.wrapper3 = {};

    $scope.datas = [
        { "input_value" : "1" },
        { "input_value" : "2" },
        { "input_value" : "3" },
        { "input_value" : "4" }
        ];

}

HTML用法：

 <div ng-app="myApp" ng-controller="MyCtrl">
    <my-directive model="wrapper" datas="datas"></my-directive>
     <my-directive model="wrapper2" datas="datas"></my-directive>
     <my-directive model="wrapper3" datas="datas"></my-directive>
</div>

工作Fiddle

相关文章：