CODEWITHSUNDEEP
javascriptjqueryangularjshtml
Urvashi Bhatt
Urvashi Bhatt

Reputation: 529

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

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:

enter image description here

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

Upvotes: 2

Views: 1722

Answers (1)

Kishor Velayutham
Kishor Velayutham

Reputation: 818

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

Upvotes: 2

Related Questions