使用Web服务根据对另一个下拉框的选择填充第二个下拉框以获取信息
Populating a second dropdown box based on the selection of another using webservice to get information
我使用一个名为KeywordService的web服务填充了一个下拉列表,该web服务访问.NET控制器,从另一个项目填充列表。
下面是角度控制器,web开发人员在这里说我需要监视关键字更改事件,将关键字传递给getQualifier函数。如何"监控"它?有人能告诉我怎么做吗?
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
});
这就是服务:
// 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;
}
}
};
});
服务为关键字和限定符调用的.NET控制器
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
Dim res As New PCA.Core.Web.JSON.Response
Dim keywordList As New List(Of ViewModels.Core.Keyword)
For Each u As Trident.Core.Core.Keyword In Trident.Core.Globals.TridentApp.ApplicationCache.Keywords.Keywords
keywordList.Add(New ViewModels.Core.Keyword(u))
Next
Try
res.success = True
res.message = ""
res.data = keywordList.OrderBy(Function(c) c.description)
Return New PCA.Core.Web.JSON.JSONPResult() With { _
.Data = res,
.Callback = callback
}
Catch ex As Exception
res.success = False
res.message = ex.Message
res.data = ""
Return New PCA.Core.Web.JSON.JSONPResult() With { _
.Data = res,
.Callback = callback
}
End Try
End Function
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
Dim res As New PCA.Core.Web.JSON.Response
Dim qualifierList As New List(Of ViewModels.Core.Qualifier)
For Each u As Trident.Core.Core.Qualifier In Trident.Core.Globals.TridentApp.ApplicationCache.Keywords.Qualifiers(keyword)
qualifierList.Add(New ViewModels.Core.Qualifier(u))
Next
Try
res.success = True
res.message = ""
res.data = qualifierList.OrderBy(Function(c) c.description)
Return New PCA.Core.Web.JSON.JSONPResult() With { _
.Data = res,
.Callback = callback
}
Catch ex As Exception
res.success = False
res.message = ex.Message
res.data = ""
Return New PCA.Core.Web.JSON.JSONPResult() With { _
.Data = res,
.Callback = callback
}
End Try
End Function
这是关键字和限定符的ViewModel:
Namespace ViewModels.Core
Public Class Keyword
Private m_keyword As String
Private _m_keywords As List(Of Core.Keyword)
Public Sub New()
End Sub
Public Sub New(keyword As Trident.Core.Core.Keyword)
m_keyword = keyword.Description.ToString
End Sub
Sub New(m_keywords As List(Of Core.Keyword))
' TODO: Complete member initialization
_m_keywords = m_keywords
End Sub
Public Property description As String
Get
Return m_keyword
End Get
Set(value As String)
m_keyword = value
End Set
End Property
End Class
End Namespace
限定符:
Namespace ViewModels.Core
Public Class Qualifier
Private m_qualifier As String
Private _m_qualifiers As List(Of Core.Qualifier)
Public Sub New()
End Sub
Public Sub New(qualifier As Trident.Core.Core.Qualifier)
m_qualifier = qualifier.Description.ToString
End Sub
Sub New(m_keywords As List(Of Core.Qualifier))
' TODO: Complete member initialization
m_qualifier = m_qualifier
End Sub
Public Property description As String
Get
Return m_qualifier
End Get
Set(value As String)
m_qualifier = value
End Set
End Property
End Class
End Namespace
这是我有下拉菜单的html文件
<!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="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="form-group">
<select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="mill">
<option value="">Select a Mill </option>
<option value="608">Tomahawk Mill</option>
<option value="610">Valdosta Mill</option>
<option value="620">Counce Mill</option>
<option value="622">Filer Mill</option>
<option value="650">DeRidder Mill</option>
<option value="651">Wallula Mill</option>
<option value="652">Jackson Mill</option>
<option value="653">International Falls Mill</option>
</select> <br/><br/>
<select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="keyword">
<option value="">Select a Keyword</option>
<option ng-repeat="keyword in allKeywords" value="{{keyword.description}}"> {{keyword.description}} </option>
</select><br/><br/>
<select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="selectedQualifier">
<option value="">Select a Qualifier</option>
<option ng-repeat="qualifier in allQualifiers" value="{{qualifier.description}}"> {{qualifier.description}} </option>
</select>
</div>
您可以使用ng-change
,它会在选择框的值更改时触发。
ng-change="getQualifier(keyword)"
将第一个选择的模型传递给类似的第二个
<select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="keyword">
<option value="">Select a Keyword</option>
<option ng-repeat="keyword in allKeywords" value="{{keyword.description}}"> {{keyword.description}} </option>
</select><br/><br/>
<select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="selectedQualifier" ng-change="getQualifier(keyword)">
<option value="">Select a Qualifier</option>
<option ng-repeat="qualifier in allQualifiers" value="{{qualifier.description}}"> {{qualifier.description}} </option>
</select>
希望这就是你想要实现的!
相关文章:
- 预填充选择菜单
- 使用javascript填充选择框
- Angularjs 通过选择不同选择框中的两个字段来填充选择框
- 使用 ajax 填充选择时没有选定的默认选项的问题
- 使用数组中的选项填充选择菜单
- 使用循环填充选择
- 使用 for 循环用逗号分隔的值填充选择元素
- 从另一个选择框并使用数据库连接填充选择框
- 使用对象(JavaScript或jQuery)填充选择下拉列表
- 根据预选,用值填充选择列表
- 用文本输入填充选择输入
- JQuery以基于另一个选择列表填充选择列表
- 如何java脚本填充2选择一个
- jqGrid基于先前的选择填充选择选项
- PHP通过URL自动填充选择框
- Jquery 移动干扰 JavaScript 填充选择框
- 使用 jquery 填充选择选项失败
- 如何使用切换的传单图层组中的标记填充选择
- jquery未填充选择
- 根据更改事件填充选择下拉列表