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。

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

指令可能如下所示：

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

控制器：

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