AngularJS - Fill input text field with dropdown menu

Question

How can I fill an input text field with a dropdown-menu ?

Text Input:

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

Own written dropdown:

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

If I select an li element I want to update the storagePlaceModel with the li value.

Updated question: Because I have more than one of these text inputs with dropdowns I need a solution where the conroller/directive does not know the model name exactly.

Directive could look like:

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

Thank you for your help! I would appreciate every answer.

lms-dropdown enable/disable dropdown - no other included code/function — Bernhard Pointner
– Bernhard Pointner, Commented Feb 21, 2015 at 10:15
How about creating a directive that will wrap the text input and the dropdown, and that way will know its own model ? — Omri Aharon
– Omri Aharon, Commented Feb 21, 2015 at 10:57
And how can I do this ? How can I access the parent model name and what do you mean with wrapping ? — Bernhard Pointner
– Bernhard Pointner, Commented Feb 21, 2015 at 11:02

Omri Aharon · Accepted Answer · 2015-02-21 11:48:08Z

1

I've edited the entire question to create a directive to wrap your desired structure. You'll pass to the directive the model you want, and that way, each model will be independent on different directive usages:

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

The directive.html contains your text input and the dropdown.

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 usage:

 <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

edited Feb 21, 2015 at 11:48

answered Feb 21, 2015 at 10:31

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bernhard Pointner Over a year ago

I had/have the same solution - and i works fine. But in this case I have to know in the conroller which model the text input has or which name the model has. Because I have more of this dropdowns I need a solution which where the controller is independent of the model name

Omri Aharon Over a year ago

@BernhardPointner Not really sure I follow, seems like you ask a different thing than the original question :) Can you update your question with a clearer explanation?

Bernhard Pointner Over a year ago

Now nearly all works. The <i ng-show="model.storagePlaceModel == data.input_value" class="glyphicon glyphicon-ok"></i> only updates at the first time. With a second selection of the a dropdown element the glyphicon does not update.

Omri Aharon Over a year ago

@BernhardPointner I updated the fiddle, I don't have the font so I simply added the word test whenever clicked. Take a look.

Bernhard Pointner Over a year ago

Thanks a lot for your time and your answer @Aharon. It was just a stupid style problem (of the glyphicon) Now everything works! :)

Collectives™ on Stack Overflow

AngularJS - Fill input text field with dropdown menu

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related