假设我有
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>
但就输入字段而言，一旦选择了项目，我想显示item.fdlAccountName + item.fdlAccountDesc + item.status + item. effectiveDate。有什么办法可以实现这一点吗？
更新
好吧，现在你看到当我有下拉值时，当你选择“IS00698000”时，它会在输入字段中显示“IS00698000”，这正是你所期望的，因为 ng-model 绑定(bind)了该值。 但我希望 ng-model=formData_TransGrid.fdlAcctNameOther 具有值“IS00698000”，但向用户显示“IS00698000 - PT 回扣 - 向交易台出售支付给 IFG 的优惠 - 事件”
最佳答案
是的，这是可能的，你应该使用 ng-model getter setter，你可以这样做:
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;
}
这只是一个伪代码。
关于javascript - Angular - 如何在输入字段中显示与所选 ng-model 不同的所选值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35730564/