如何为Angular-ui-bootstrap自动完成组件预填选中指定JSON数据

嘿，我来帮你搞定这两个头疼的问题！

一、uib-typeahead中类似ng-options的track by用法 #

当然有！AngularUI Bootstrap的typeahead组件支持两种方式实现类似ng-options里track by的功能，用来基于唯一标识匹配对象，而不是依赖对象引用：

方式1：在typeahead表达式中直接添加track by #

修改你的input标签，在表达式末尾加上track by company.companyId（用companyId作为唯一标识）：

<input type="text" 
       ng-model="loadStopForm.customer" 
       uib-typeahead="company as company.companyName for company in allCompanies | filter:$viewValue | limitTo:8 track by company.companyId" 
       class="form-control" 
       data-error="Please select a customer" 
       required>

方式2：使用uib-typeahead-track-by属性 #

如果觉得表达式太长，也可以单独用这个属性指定跟踪字段：

<input type="text" 
       ng-model="loadStopForm.customer" 
       uib-typeahead="company as company.companyName for company in allCompanies | filter:$viewValue | limitTo:8"
       uib-typeahead-track-by="company.companyId"
       class="form-control" 
       data-error="Please select a customer" 
       required>

小提醒：我发现你代码里写的是company.businessName，但你的allCompanies数组里的字段是companyName，这是个小笔误，得改成company.companyName才能正确显示公司名称哦！

二、预填充指定公司JSON对象的解决办法 #

你遇到的预填充问题，本质是因为typeahead默认通过对象引用匹配——如果你赋值的对象不是allCompanies数组里的原对象（比如是后端返回的新对象，属性相同但引用不同），组件就无法识别，自然不会显示对应的名称。解决办法有两种：

方法1：从allCompanies数组中匹配原对象引用 #

在控制器里，拿到预填充的公司对象后，从allCompanies里找到对应的原对象，再赋值给ng-model：

// 假设这是你从后端获取的预填充公司对象
const preFillCompany = {"companyId":2,"companyName":"Pepsi","companyCode":"PEP"};

// 从allCompanies中找到匹配的原对象
const matchedCompany = $scope.allCompanies.find(company => company.companyId === preFillCompany.companyId);

// 赋值给ng-model
$scope.loadStopForm.customer = matchedCompany;

方法2：结合track by实现非引用匹配 #

如果你不想手动找原对象，只要用上前面提到的track by配置，直接赋值新对象也能正常显示——因为组件会根据companyId这个唯一标识来匹配，而不是对象引用：

// 直接赋值后端返回的新对象即可
$scope.loadStopForm.customer = {"companyId":2,"companyName":"Pepsi","companyCode":"PEP"};

这样就能让typeahead正确识别并显示预填充的公司名称啦！

内容的提问来源于stack exchange，提问作者Sikandar Sahab