Question

假设我有

＆＃13;

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

＆＃13;

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

＆＃13;

但就输入字段而言，我想在选择项目后显示item.fdlAccountName + item.fdlAccountDesc + item.status + item.effectiveDate,。这有什么办法可以实现吗？

更新

好的，现在当你选择“IS00698000＆＃39;”时，你会看到我有下拉值的时间。它显示了＆＃39; IS00698000＆＃39;在输入字段中，这是您所期望的，因为ng-model绑定了该值。但我希望ng-model = formData_TransGrid.fdlAcctNameOther有价值＆＃39; IS00698000＆＃39;但是向用户显示＆＃34; IS00698000-PT Rebates -To Trading Desk出售特许权支付给IFG - 活跃＆＃34; < / p>

Answer 1

是的，你应该使用ng-model getter setter，你可以这样做：

<强> HTML：

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

<强>控制器：

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

那只是一个伪代码。

Answer 2

在ngModelController中有一些称为格式化程序和解析器的东西。它们用于将值转换为/ to viewModel。你应该用它们来解决这个问题。以下是与其实现相关的一些答案，您可以将其用作单元。

Angular join multiple fields to one field

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

他们的文档是here

Angular - 如何在输入字段中显示不同于所选ng-model的选定值？

更新

2 个答案: