I'm a very newbie to AngularJS, so please try to understand my concerns.
我是AngularJS的新手,所以请尽量了解我的担忧。
I already have an HTML page and a controller written for it as follows :
我已经有一个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'
};
} ]);
Now ignore all the code and concentrate only on the input field for IFSC code. I want to make this input field auto complete enabled. For it I referred following link
现在忽略所有代码,只关注IFSC代码的输入字段。我想让这个输入字段自动完成启用。为此,我提到了以下链接
Autocomplete basic Usage in Angular Material
自动完成角度材质的基本用法
I want to implement the same code into my code on the field for IFSC code. But since my controller file already contains a controller where should I write the JS code from link and what changes do I need to make in HTML code?
我想在IFSC代码的字段上的代码中实现相同的代码。但是,由于我的控制器文件已经包含一个控制器,我应该从链接编写JS代码,我需要在HTML代码中进行哪些更改?
I've become clueless now. Please somebody help me out.
我现在变得一无所知。请有人帮帮我。
Thanks.
P.S. : All the necessary CSS and JS files have been already included in config file to use Angular Material in my project.
附: :所有必需的CSS和JS文件已经包含在配置文件中,以便在我的项目中使用Angular Material。
1 个解决方案
#1
0
I'll give you an example.
我给你举个例子。
<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>
here, md-selected-item represents the the value you will select after showing the result.
这里,md-selected-item表示显示结果后您将选择的值。
md-search-text stores the text you write in the box.
md-search-text存储您在框中写入的文本。
md-items will be responsible for showing result depending upon the query. It will use a searchFunction which will be written in the controller. For Example,
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 will display the text. md-item-template is a template for each item returned by md-items.
md-item-text将显示文本。 md-item-template是md-items返回的每个项目的模板。
md-not-found will display the message it there are no match found. There are many other options available too. check out the offical documentation for more details.
md-not-found将显示未找到匹配项的消息。还有许多其他选择。查看官方文档以获取更多详细信息。
#1
0
I'll give you an example.
我给你举个例子。
<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>
here, md-selected-item represents the the value you will select after showing the result.
这里,md-selected-item表示显示结果后您将选择的值。
md-search-text stores the text you write in the box.
md-search-text存储您在框中写入的文本。
md-items will be responsible for showing result depending upon the query. It will use a searchFunction which will be written in the controller. For Example,
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 will display the text. md-item-template is a template for each item returned by md-items.
md-item-text将显示文本。 md-item-template是md-items返回的每个项目的模板。
md-not-found will display the message it there are no match found. There are many other options available too. check out the offical documentation for more details.
md-not-found将显示未找到匹配项的消息。还有许多其他选择。查看官方文档以获取更多详细信息。