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元素，我想要使用storagePlaceModel值更新li。

更新了问题： 因为我有多个带有下拉列表的文本输入，我需要一个解决方案，其中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
            });
        }
    };
});

感谢您的帮助！我很感激每一个答案。

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

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

1 个答案: