[AngularJS]javascript-AngularJS-typeahead 自动完成后填充其他字段

发布时间: 2017/4/16 11:12:02
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我新到 AngularJS。经过长期的斗争,我发现了如何在 Angularjs 中使用自动完成。

现在上从自动完成选择值,基于价值选择,其他字段需要填充。ie。对加载屏幕,将在文本框 1 和文本框 2 加载默认值。当用户通过自动完文本框 1 中选择了一个新的值时,然后必须填充 Testbox 2 中相应的值。

<table>
   <tr>
      <th>Project number</th>
      <th>Project Name</th>
   </tr>
   <tr ng-repeat="s in projectListObj">
      <td><input name="projects" type="text" placeholder="Project Number" ng-model="s.project_number" typeahead="s as s.project_number for s in projectData | filter:{project_number:$viewValue}" | limitTo:8" class="form-control"></td>
     <td><input type="text" name="proj-name" placeholder="Project Name" ng-model="s.project_name"/></td>
   </tr>
</table>

解决方法 1:

你可以把手表放在你 ng-model 。 当你改变时,你更新其他模型为例

$scope.$watch('BillDate1', function (newval, oldval) {
        verfifyDate();
        if (newval != undefined)
            $scope.SearchModel.OtherVal[0] = newval;
        if (newval == null)
            $scope.SearchModel.OtherValTwo[0] = '';
    });

更清洁的方式是在模板的使用

      <input type="text" name="Person Contacted" 
typeahead="a as a.Name for a in getCustomerContactDetails($viewValue)"
model="s.allCustomerContact.Name" typeahead-on-select='s.onSelectContactPerson(allCustomerContact.Name)' >

您的具体情况,我认为,你想要什么是整个放 typeahead:

<td><input type="text" name="proj-name" placeholder="Project Name" ng-model="s"  uib-typeahead="r as r.project_name for r in projectData"/></td>

这种方式,您可以显示编号和名称,因为指定的中声明。这里是呆瓜

https://plnkr.co/edit/MzYHvdQvZ5LALI3Ge2av?p=preview

我用过的内容,因为它看起来更清晰 typeahead

希望它能帮助

官方微信
官方QQ群
31647020