Javascript 在下面的场景中，我应该如何将自动完成代码集成到当前的AngularJS代码中？

我是AngularJS的新手，所以请试着理解我的担忧

我已经有了一个HTML页面和一个为其编写的控制器，如下所示：

bankDetails.html

<!-- Main -->
<div layout="row" layout-sm="column" layout-gt-sm="column"
    layout-md="row" layout-xs="column" layout-lg="row"
    style="margin-bottom: 1em" class="user-settings">
    <!-- First Column -->
    <div layout-align="center" layout="column" flex="100">
        <div layout-align="center" flex="100">
            <div class="singleColumnUserSettings">
                <form name="bankDetailsForm" action="save" method="POST"
                    ng-init="getBankDetails()">

                    <md-input-container class="md-block" style="margin-top:1em;">
                    <label>Current Account Label</label> <input
                        ng-model="bankDetails.currentAccountLabel" required
                        name="currentAccountLabel" ng-change="editField()">
                    <div ng-messages="bankDetailsForm.currentAccountLabel.$error">
                        <div ng-message="required">Please enter valid Bank account
                            Label</div>
                    </div>
                    </md-input-container>

                    <md-input-container class="md-block" style="margin-top:0px;">
                    <label>Bank Name</label> <input ng-model="bankDetails.bankName"
                        required name="bankName" ng-change="editField()">
                    <div ng-messages="bankDetailsForm.bankName.$error">
                        <div ng-message="required">Please enter valid Bank name</div>
                    </div>
                    </md-input-container>

                    <md-input-container class="md-block" style="margin-top:0px;">
                    <label>Branch</label> <input ng-model="bankDetails.branch" required
                        name="branch" ng-change="editField()">
                    <div ng-messages="bankDetailsForm.branch.$error">
                        <div ng-message="required">Please enter valid Branch</div>
                    </div>
                    </md-input-container>

                    <md-input-container class="md-block" style="margin-top:0px;">
                    <label>IFSC Code</label> <input ng-model="bankDetails.ifscCode"
                        required name="ifscCode" ng-change="editField()">
                    <div ng-messages="bankDetailsForm.ifscCode.$error">
                        <div ng-message="required">Please enter valid IFSC code</div>
                    </div>
                    </md-input-container>

                    <md-input-container class="md-block" style="margin-top:0px;">
                    <label>Account Number</label> <input
                        ng-model="bankDetails.accountNumber" required
                        name="accountNumber" ng-change="editField()">
                    <div ng-messages="bankDetailsForm.accountNumber.$error">
                        <div ng-message="required">Please enter valid Bank account
                            number</div>
                    </div>
                    </md-input-container>

                    <md-input-container class="md-block" style="margin-top:0px;"
                        flex=100> <label>Transaction Type</label> <md-select
                        required ng-model="bankDetails.transactionType" ng-change="editField()"> <md-option
                        ng-repeat="type in transactionTypes" value="{{type}}">
                    {{type}} </md-option> </md-select>
                    <div ng-messages="bankDetailsForm.transactionType.$error">
                        <div ng-message="required">Please select Transaction type</div>
                    </div>
                    </md-input-container>

                    <md-button style="width:30%; display: block;margin:3em auto auto;"
                        ng-disabled="bankDetailsForm.$invalid" id="save" ng-click="save()"
                        class="md-raised md-primary">Save</md-button>
                </form>
            </div>
        </div>
    </div>

    <!-- Second Column-->

    <div layout-align="center" layout="column" flex="100">
        <div layout-align="center end" flex="100">
            <div class="singleColumnRightUserSettings">

                <md-content layout-padding>

                <form name="masterUserSettingsUploadFile" action="save"
                    method="POST">

                    <md-radio-group ng-model="data.documentType" class="textSizeMedium">
                    <div layout="row" style="margin-top: 0.5em;" flex=100>
                        <md-radio-button value="Cancelled & crossed Cheque"
                            style="margin-top: 0.8em;"> <b>Cancelled &
                            crossed Cheque</b> </md-radio-button>
                        <p style="margin-left: 1em;" class="textSizeSmall">-
                            Organization name printed on same</p>
                    </div>
                    <div layout="row">
                        <md-radio-button value="A Nodal Bank Letter"
                            style="margin-top: 1em;"> <b>A Nodal Bank
                            Letter</b> </md-radio-button>
                        <p style="margin-left: 1em;" class="textSizeSmall">- Stating
                            your current account details</p>
                    </div>

                    </md-radio-group>
                    <div layout="row" flex="100" style="margin-top: 1em;">
                        <input style="display: none;"
                            on-read-file="uploadFile($fileContent)" type="file"
                            name="file-6[]" id="file-6" class="inputfile inputfile-5"
                            data-multiple-caption="{count} files selected" multiple /> <label
                            for="file-6"> <i class="material-icons uploadFile"
                            style="margin-left: -0.8em;">insert_drive_file</i> <span></span></label>
                        <span class="radioValue textSizeSmall" style="margin-top: 0.8em;"
                            flex=50>{{ data.documentType }} </span>
                        <div layout="row" layout-align="right">
                            <md-button class="md-icon-button"> <i
                                class="material-icons uploadFile">delete</i></md-button>
                        </div>

                    </div>
                    <md-content class="messageBorder"
                        style="background-color:#FFC1C1;border-radius:5px;margin-top:1em;">
                    <label class="textSizeSmall">We would request you to please
                        send us all the documents Self Attested (Signature and Company
                        Stamp). Please use the sign which is matching with your ID proof
                        provided.</label> </md-content>
                </form>
            </div>
        </div>
    </div>
</div>

现在忽略所有代码，只关注IFSC代码的输入字段。我想使此输入字段自动完成启用。为此，我参考了以下链接

我想在IFSC代码字段的代码中实现相同的代码。 但是，既然我的控制器文件已经包含一个控制器，我应该在哪里从link编写JS代码，我需要在HTML代码中做哪些更改

我现在变得不知所措了。请有人帮帮我

谢谢

---

p.S.：配置文件中已经包含了所有必要的CSS和JS文件，以便在我的项目中使用角度材质

我给你举个例子

 <md-autocomplete required 
                  md-selected-item="selectedCode"
                  md-search-text="bankDetails.ifscCode"
                  md-items="temp in editField(bankDetails.ifscCode)"
                  md-item-text="temp.text"
                  placeholder="IFSC Code">
    <md-item-template>
        <span md-highlight-text="search" md-highlight-flags="^i">{{temp.text}}</span>
    </md-item-template>
    <md-not-found>
        No states matching "{{bankDetails.ifscCode}}" were found.                            
    </md-not-found>
</md-autocomplete>

md项目文本

将显示文本。

md item template

是由

md items

返回的每个项目的模板

md not found

将显示消息“未找到匹配项”。

---

还有很多其他的选择。有关更多详细信息，请查看官方文档。

我从问题中给出的链接中了解了示例。我想在我的代码中集成同样的功能。请为我提供解决方案。谢谢。您可以将html代码放在html文件中，并创建适当的

$scope

变量。@user2839497实现上述代码的任何更新？

 <md-autocomplete required 
                  md-selected-item="selectedCode"
                  md-search-text="bankDetails.ifscCode"
                  md-items="temp in editField(bankDetails.ifscCode)"
                  md-item-text="temp.text"
                  placeholder="IFSC Code">
    <md-item-template>
        <span md-highlight-text="search" md-highlight-flags="^i">{{temp.text}}</span>
    </md-item-template>
    <md-not-found>
        No states matching "{{bankDetails.ifscCode}}" were found.                            
    </md-not-found>
</md-autocomplete>

$scope.editField = editField ;
editField = function(query){
   //use $http service to query server and resolve this promise and return  object or array to iterate.
};