0

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

bankDetailsController.js

var app = angular.module('app_name');
var isEmpty = true;

app.controller("bankDetailsController", [ "$scope", "$http", "config", "$mdToast",
        function($scope, $http, config, $mdToast) {
            $scope.bankDetails = {};
            $scope.transactionTypes = {
                NEFT : "NEFT",
                IMPS : "IMPS",
                WALLET : "WALLET",
            };

            $scope.getBankDetails = function() {
                $http.get(config.webServicesUrl.bankDetails, headerConfig).success(function(data) {
                    if (data.body) {
                        $scope.bankDetails.currentAccountLabel = data.body.currentAccountLabel;
                        $scope.bankDetails.bankName = data.body.bankName;
                        $scope.bankDetails.branch = data.body.branch;
                        $scope.bankDetails.ifscCode = data.body.ifcsCode;
                        $scope.bankDetails.accountNumber = data.body.accountNumber;
                        //$scope.bankDetails.transactionTypes[NEFT] = $scope.transactionTypes.NEFT;
                        isEmpty = false;
                    }
                }).error(function(error) {
                    console.log("Error : " + error.error);
                });
            };

            $scope.save = function() {
                var bankDetails = {
                    currentAccountLabel : $scope.bankDetails.currentAccountLabel,
                    bankName : $scope.bankDetails.bankName,
                    branch : $scope.bankDetails.branch,
                    ifcsCode : $scope.bankDetails.ifscCode,
                    accountNumber : $scope.bankDetails.accountNumber,
                    transactionType : "NEFT",
                };
                if (isEmpty) {
                    $http.post(config.webServicesUrl.bankDetails, bankDetails, headerConfig).success(function(data) {
                        displayToastMessage("Your details saved successfully", $mdToast);
                        $( "#save" ).prop( "disabled", true );
                        isEmpty = false;
                    }).error(function(error) {
                        console.log("Error : " + error.error);
                    });
                } else {
                    $http.put(config.webServicesUrl.bankDetails, bankDetails, headerConfig).success(function(data) {
                        displayToastMessage("Your details saved successfully", $mdToast);
                        $( "#save" ).prop( "disabled", true );
                    }).error(function(error) {
                        console.log("Error : " + error.error);
                    });
                }
            }
            $scope.editField = function() {
                // Enable save button after user starts editing
                $( "#save" ).prop( "disabled", false );
            };
            $scope.data = {
                documentType : 'Cancelled & crossed Cheque'
            };

        } ]);

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

Angular Material 中的自动完成基本用法

我想在 IFSC 代码字段的代码中实现相同的代码。但是由于我的控制器文件已经包含一个控制器，我应该在哪里从链接编写 JS 代码，我需要在 HTML 代码中进行哪些更改？

我现在变得一头雾水。请有人帮帮我。

谢谢。

PS：所有必要的 CSS 和 JS 文件都已包含在配置文件中，以便在我的项目中使用 Angular Material。

4

1 回答 1

0

我给你举个例子。

 <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-selected-item表示您在显示结果后将选择的值。

md-search-text存储您在框中写入的文本。

md-items将负责根据查询显示结果。它将使用将写入控制器的 searchFunction。例如，

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

md-item-text将显示文本。 md-item-template是由 . 返回的每个项目的模板md-items。

md-not-found将显示没有找到匹配项的消息。还有许多其他选项可用。查看官方文档了解更多详情。

于 2016-03-10T13:11:02.783 回答