AngularJs: Set Text to a Text Box by Click On That Text

Question

I want to send a text to a textbox on that "Text 1" Click

Here is my code:

HTML:

<td ng-show="table.similarParts">
   <input ng-hide="item.is_new == false" type="text" class="form-control" uib-tooltip="You Can Filter Different Part Also" uib-tooltip-trigger="focus" uib-tooltip-placement="top"/>
</td>
<td class="wd-80" ng-show="table.similarParts">
    <div class="btn-group" uib-dropdown="dropdown" ng-hide="item.is_new == false">
     <button class="btn btn-default" type="button" data-keyboard="false" data-backdrop="static" uib-tooltip="Search This Part From Available Parts"" uib-tooltip-trigger="focus" uib-tooltip-placement="top"> <em class="fa fa-search"></em></button>
     <button class="btn dropdown-toggle btn-default" type="button" uib-dropdown-toggle="">
       <span class="caret"></span>
       <span class="sr-only">default</span>
     </button>
        <ul class="dropdown-menu" role="menu">
         <li><a>Text 1</a>
         </li>
         <li>
          <a>Text 2</a>
         </li>
        </ul>
     </div>
 </td>

And Here is the Output:

I want to send this Text 1 to a TextBox Input on that "Text 1" Click ("Button is that magnifier glass")

javascript lets you use .value = "Text 1" to set the value of an input. However, if you're using an angular controlled input, you should be able to set its value from within your controller by setting bom_item.part = "Text 1" — haxxxton
– haxxxton, Commented Mar 10, 2018 at 6:09
pass the value you want to set to a function that sets it into the input value. You should be able to bind the click event of any of the list items in your dropdown — haxxxton
– haxxxton, Commented Mar 10, 2018 at 6:16
I m new to angular js can you please give me an example it would be a great help — Urvashi Bhatt
– Urvashi Bhatt, Commented Mar 10, 2018 at 6:18
Have a look at the example under ngController that should be able to point you in the direction of binding functions and setting values :) — haxxxton
– haxxxton, Commented Mar 10, 2018 at 6:20

Kishor Velayutham · Accepted Answer · 2018-03-10 06:57:32Z

2

You can use something like this :

Bind both select and input to the same ngModel:

Note: Given the logic here. CSS and other dropdown related changes i didn't make. In controller:

On click of li ,the text value will be displayed in input text box.

    angular.module('app', []).controller('dummy', function($scope) {
              $scope.call= function(event){
              $scope.valueText = angular.element(event.target).text();
              }
            });

<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>

    <div ng-app="app" ng-controller="dummy">
      <input type="text" ng-model="valueText" />
     <ul class="dropdown-menu" role="menu" ng-click="call($event)">
         <li><a>Text 1</a>
         </li>
         <li>
          <a>Text 2</a>
         </li>
        </ul>
     
     
    </div>

Hope this helps..!

edited Mar 10, 2018 at 6:57

answered Mar 10, 2018 at 6:30

Kishor Velayutham

8286 silver badges18 bronze badges

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

7 Comments

Urvashi Bhatt Over a year ago

look at my code once i m not using <select> dropdown

Kishor Velayutham Over a year ago

@UrvashiBhatt,Logic i have given here.Css i didnt add it here. Check it out the updated code.

Kishor Velayutham Over a year ago

@UrvashiBhatt, Glad to know.

Urvashi Bhatt Over a year ago

one problem occur here actually i m using ng-repeat on my <tr> so this event effect on my all textboxes

Kishor Velayutham Over a year ago

@UrvashiBhatt, change the ng-model for textbox. It should be unique. If the ng-model is same . It might have affect other text box as well.

|

Collectives™ on Stack Overflow

AngularJs: Set Text to a Text Box by Click On That Text

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related