Utilizing a web-service named KeywordService that interacts with the .NET controller, I have successfully populated a drop-down by fetching a list from another project.
In the angular controller below, I have been advised by our web developer to monitor the keyword change event and pass the keyword to the getQualifier function. How can I achieve this monitoring? Can someone guide me on how to do it?
var StockItemMultiMillInquiryController = function ($scope, $sce, $rootScope, $modal, $window, StockItemMultiMillService, KeywordService, QualifierService) {
$rootScope.title = 'Stock Item Multi Mill Inquiry';
$scope.allMills = [];
$scope.mill = '';
$scope.stockNumber = '';
$scope.description = '';
$scope.qtyonhand = '';
$scope.qualifier = '';
$scope.costType = '';
$scope.keyword = '';
$scope.allKeywords = [];
$scope.qualifier = keyword;
$scope.selectedQualifier = '';
$scope.allQualifiers = [];
KeywordService.getKeyword().then(function (keywords) {
$scope.allKeywords = keywords
});
QualifierService.getQualifier().then(function (qualifier) {
$scope.allQualifiers = qualifier
});
Below is the service:
// Keyword service for dropdown ticket #54507
app.service('KeywordService', function ($http, cache) {
return {
getKeyword: function () {
var keywords = cache.get('keyword');
if (!keywords) {
return $http({ method: 'JSONP', url: "/api/core/keyword/keyword?callback=JSON_CALLBACK", params: {} }).then(function (result) {
if (result.data.success) {
cache.put('keyword', result.data.data);
return result.data.data;
} else {
return [];
}
});
} else {
var deferred = $q.defer();
deferred.resolve(keywords);
return deferred.promise;
}
}
};
});
// Qualifier service for dropdown ticket #54507
app.service('QualifierService', function ($http, cache) {
return {
getQualifier: function () {
var qualifiers = cache.get('qualifier');
if (!qualifiers) {
return $http({ method: 'JSONP', url: "/api/core/qualfier/qualifier?callback=JSON_CALLBACK", params: {qualifier: qualifier} }).then(function (result) {
if (result.data.success) {
cache.put('qualifier', result.data.data);
return result.data.data;
} else {
return [];
}
});
} else {
var deferred = $q.defer();
deferred.resolve(qualifiers);
return deferred.promise;
}
}
};
});
The ASP.NET controller responsible for handling keyword and qualifier requests:
Imports PCA.Core.Search
Imports PCA.Core.Web.JSON
Public Class KeywordController
Inherits System.Web.Mvc.Controller
' GET: /Plants
<PCA.Core.Web.CompressionFilter> _
Function Keyword(callback As String) As ActionResult {
// Controller implementation details here...
}
End Class
Imports PCA.Core.Search
Imports PCA.Core.Web.JSON
Public Class QualifierController
Inherits System.Web.Mvc.Controller
' GET: /Plants
<PCA.Core.Web.CompressionFilter> _
Function Qualifier(callback As String, keyword As String) As ActionResult {
// Controller implementation details here...
}
End Class
The ViewModel classes for Keyword and Qualifier:
Namespace ViewModels.Core
Public Class Keyword {
// ViewModel class for Keyword
}
End Namespace
Namespace ViewModels.Core
Public Class Qualifier {
// ViewModel class for Qualifier
}
End Namespace
And finally, the HTML file containing the dropdown selections:
<!DOCTYPE html>
<!-- View for the Stock item multi mill inquiry Ticket #54507-->
<html>
<head>
<title>Stock Item Multi Mill Inquiry</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
// Dropdown menu options here...
</div>
</div>