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

Question

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

文本输入:

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

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

指令可能看起来像:

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
            });
        }
    };
});

感谢您的帮助!我将不胜感激。

Answer 1

我编辑了整个问题以创建一个指令来包装您想要的结构。您将向指令传递所需的模型，这样，每个模型将独立于不同的指令用法:

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 包含您的文本输入和下拉列表。

Controller :

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>

Working Fiddle