CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapangular-ngmodel
josh_boaz
josh_boaz

Reputation: 2023

Angular - How to show selected value different in the input field, different than selected ng-model?

Suppose i have 

    var app = angular.module('plunker', ['ui.bootstrap']);

    app.controller('MainCtrl', function($scope) {


    $scope.FDLAccountOther = [{
      "fdlAccountId": 300,
      "fdlAccountName": "IS00698000",
      "fdlAccountDesc": "PT Rebates -To Trading Desks on selling concessions paid to IFG",
      "fdlAccountType": "R",
      "setId": "FDL01",
      "isDefault": null,
      "balanceForward": null,
      "bsIndicator": null,
      "status": "Active"
    }, {
      "fdlAccountId": 301,
      "fdlAccountName": "IS00699000",
      "fdlAccountDesc": "PT Rebates -To Trading Desks on selling concessions paid to IIG",
      "fdlAccountType": "R",
      "setId": "FDL01",
      "isDefault": null,
      "balanceForward": null,
      "bsIndicator": null,
      "status": "Active"
    }]
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.js"></script>


    <!DOCTYPE html>
    <html ng-app="plunker">         
    <div class="input-group" ng-controller="MainCtrl">
      <input type="text" 
             class="form-control"
             ng-model="formData_TransGrid.fdlAcctNameOther"
             placeholder="Enter FDL Account" 
             uib-typeahead="item.fdlAccountName as item.fdlAccountName for item in FDLAccountOther | filter:$viewValue|limitTo:3" />
        <span class="input-group-btn">
        <button class="btn btn-success ebtn"
                type="button"
                data-toggle="modal" 
                data-target="#FDLAccountLookUp">
          Find FDL 
        </button>
      </span>
    </div>
    </html>

but as far as input field is concerned i want to show item.fdlAccountName + item.fdlAccountDesc + item.status + item.effectiveDate, once the item is selected. Any way this can be achieved?

update

ok so now you see when i have dropdown values when you select 'IS00698000' it shows 'IS00698000' in the input field, which is what you expect, since ng-model binds the value. But i want ng-model=formData_TransGrid.fdlAcctNameOther to have value 'IS00698000', but show the user "IS00698000 - PT Rebates -To Trading Desks on selling concessions paid to IFG - Active"

Upvotes: 0

Views: 990

Answers (2)

kutomer
kutomer

Reputation: 734

Yes it is possible, you should use ng-model getter setter, you can do it like this:

html:

<input ng-model-options="{ getterSetter: true } ng-model="getterSetterFunction" .../>

controller:

$scope.getterSetterFunction = function(fdlAcctNameOther) {
    if (fdlAcctNameOther) {
        // set the obj or what ever you like to do..
        $scope.FDLAccountOther.name = fdlAcctNameOther;
    }

    return $scope.FDLAccountOther.fdlAccountName + $scope.FDLAccountOther.fdlAccountDesc + $scope.FDLAccountOther.status + $scope.FDLAccountOther.effectiveDate;
}

that just a pseudo code.

Upvotes: 1

Naga Sandeep
Naga Sandeep

Reputation: 1431

There are somethings called as formatters and parsers in ngModelController. They are used to convert the values from/to viewModel. You should use them to solve this problem. Here are some answers related to its implementation which you can use as headsup.

Angular join multiple fields to one field

How to show different value of input element with ng-model?

The documentation for them is here

Upvotes: 0

Related Questions