将文本框、日期和下拉列表值绑定到参数 angularJS wcfRest
Posted
技术标签:
【中文标题】将文本框、日期和下拉列表值绑定到参数 angularJS wcfRest【英文标题】:Bind TextBox, date and dropdownlist value to parameter angularJS wcfRest 【发布时间】:2017-05-05 04:38:39 【问题描述】:我有一个使用 WCFrest 项目的 angularJS
我为参数创建下拉列表和日期选择器以过滤显示的数据。 搜索表格如下图所示
这是html代码
<!--Date From-->
<div class="col-md-4">
<input id="txtOldDate" type="date" value="2000-01-01" class="datepicker" />
</div>
<!--Date To-->
<div class="col-md-1">
<label for="labelTo" class="control-label">To</label>
</div>
<div class="col-md-4">
<input id="txtNewDate" type="date" class="datepicker" />
<!-- Set default date value to now-->
<script>
document.getElementById('txtNewDate').value = new Date().toISOString().substring(0, 10);
</script>
</div>
<!--Departement-->
<div class="col-sm-4">
<div class="dropdown">
<select class="form-control" ng-model="DdlDeptManager" ng-change="DdlManager(DdlDeptManager)">
<option ng-repeat="d in GetDeptManager" value="d.Department">d.Department</option>
</select>
</div>
</div>
<!--Employee-->
<div class="dropdown">
<!-- @departemen parameter from DdlDeptManager -->
<select id="ddlManagerApproval" ng-model="DdlManager" class="form-control">
<option ng-repeat="m in GetManager" value="m.UserName">m.FullName</option>
</select>
</div>
<!--Button Show-->
<div class="col-md-2">
<input id="btnSubmit" type="button" class="btn btn-primary" ng-click="SearchApproval()" value="Show" />
</div>
这是我的控件批准Ctrl.js
//Control for search purposes
$scope.SearchApproval = function()
var search =
//employeeID: $scope.employeeID,
oldDate: $scope.oldDate,
newDate: $scope.newDate,
departemen: $scope.departemen,
approver: $scope.approver
var promiseGet = GetApproval.GetApprovalData(search);
//GetApprovalData();
promiseGet.then(function(pl)
$scope.GetApprovalData = pl.data
,
function(errorPl)
console.log('Some Error in Getting Records.', errorPl);
);
这是service.js,对于employeeID,因为没有创建会话,我强制在uri上为其添加值
this.GetApprovalData = function(employeeID, oldDate, newDate, departemen, approver)
return $http.get("http://localhost:51458/ServiceRequest.svc/GetApproval?employeeID=" + "11321" + "&oldDate=" + oldDate + "&newDate=" + newDate + "&departemen=" + departemen + "&approver=" + approver);
;
我的问题是,如何使 datepicker id = txtOldDate 上的值给 oldDate 一个参数值,给 newDate 一个 txtNewDate,以及给 departemen 和approver 参数的其他下拉列表?
提前致谢。
【问题讨论】:
【参考方案1】:嗨,兰迪,我已经在没有服务的情况下复制了您的代码,对此我深表歉意。使用硬编码数组填充下拉列表。请检查此网址
https://plnkr.co/edit/eSriV68HkhQhzt1yE6DE?p=preview
$scope.GetDeptManager = [
Department : 'department1'
,
Department: 'department2'
];
$scope.GetManager = [
FullName : 'manager1'
,
FullName: 'manager2'
]
你必须为你的输入元素分配 ng-model 值,这样你才能在控制器中获得这些值。
【讨论】:
以上是关于将文本框、日期和下拉列表值绑定到参数 angularJS wcfRest的主要内容,如果未能解决你的问题,请参考以下文章
MVVM:将带有 Observable 集合的命令绑定到 Listbox 并从文本框中获取值