与下拉Angularjs筛选数据 [英] Angularjs Filter data with dropdown
本文介绍了与下拉Angularjs筛选数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在angularjs和JavaScript还挺新，所以请善待，我有两个下拉项目（离子选择），两者从服务保留数据。问题是，我需要为了共同努力来过滤他们想：如果我选择在第一个下拉列表中的公司，只是公司内部的代表，应在其他下拉列表中显示
我试着用 |过滤：byID 我跟着Angularjs文档中，但我不认为它是这样做不知道正确的方式。
HTML
＆LT;标签类=逐项输入项选＆GT;
＆LT; DIV CLASS =输入标签＆GT;
公司：
＆LT; / DIV＆GT;
＆LT;选择＆GT;
＆LT;选项NG重复=x合公司＆GT; {{x.compname}}＆LT; /选项＆GT;
＆LT;选项选择＆GT;选择＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; /标签＆gt;
＆LT; DIV CLASS =清单＆GT;
＆LT;标签类=逐项输入项选＆GT;
＆LT; DIV CLASS =输入标签＆GT;
代表：
＆LT; / DIV＆GT;
＆LT;选择＆GT;
＆LT;选项NG重复=X在重新present＆GT; {{x.repname}}＆LT; /选项＆GT;
＆LT;选项选择＆GT;选择＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; /标签＆gt;
使用Javascript：
/ * =========================获取所有公司======== ================= * /
$ http.get（HTTP：//本地主机：15021 / Service1.svc / GetAllComp）
.success（功能（数据）{ VAR OBJ =数据;
变种SCOMP = [];
angular.forEach（OBJ，功能（索引，元素）{ angular.forEach（指数函数（indexN，elementN）{ SComp.push（{compid：indexN.CompID，COMPNAME：indexN.CompName}）; $ scope.company = SCOMP;
}）; }）;
}）
/ * =========================获取所有公司==================== ===== * // * =========================获取全部众议员==================== ===== * /
$ http.get（HTTP：//本地主机：15021 / Service1.svc / GetAllReps）
.success（功能（数据）{ VAR OBJ =数据;
变种SReps = [];
angular.forEach（OBJ，功能（索引，元素）{ angular.forEach（指数函数（indexN，elementN）{ SReps.push（{REPID：indexN.RepID，repname：indexN.RepName，FKC：indexN.fk_CompID}）; $ scope.re present = SReps;
}）; }）;
}）
/ * =========================获取全部众议员==================== ===== * /
解决方案
您可以解决这个问题，就像我的解决方法：
我的解决方案就像你的问题。在首秀区 list和show 塔纳按选择列表区。使用过滤器前pression
在HTML：
＆LT; DIV＆GT;
＆LT;窗体类=形横＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT; DIV CLASS =COL-MD-3＆GT;＆LT;标签＆gt;＆LT; I类=发FA-问题圆FA-FW＆GT;＆LT; / I＆GT;区列表与LT; /标签＆gt;＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;
＆LT;选择类=表格控NG模型=selectedDistNG选项=district.name在各区区＆GT;
＆LT;期权价值=＆GT;选择＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT; DIV CLASS =COL-MD-3＆GT;＆LT;标签＆gt;＆LT; I类=发FA-问题圆FA-FW＆GT;＆LT; / I＆GT;塔纳列表与LT; /标签＆gt;＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;
＆LT;选择类=表格控NG模型=selectedThanaNG选项=thana.name为塔纳在thanas |过滤器：filterEx pression＆GT;
＆LT;期权价值=＆GT;选择＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
在控制器：
$ scope.selectedDist = {};
$ scope.districts = [
{ID：1，名称：达卡}，
{ID：2，名称：Goplaganj}，
{ID：3，名称：福里德布尔'}
]; $ scope.thanas = [
{ID：1，名称：米尔布尔'，做的：1}，
{ID：2，名称：Uttra'，做的：1}，
{ID：3，名称：Shahabag'，做的：1}，
{ID：4，名称：Kotalipara'，做的：2}，
{ID：5，名称：Kashiani'，做的：2}，
{ID：6，名称：Moksedpur'，做的：2}，
{ID：7，名称：'万加'，做的：3}，
{ID：8，名称：福里德布尔'，做的：3}
];
$ scope.filterEx pression =功能（塔纳）{
返回（thana.dId === $ scope.selectedDist.id）;
};
注：的这里的 filterEx pression 是一个自定义函数时所选择区ID等于在塔纳确实有返回值
I am kinda new in angularjs and javascript so please be kind, I have two dropdown items (Ionic Select) both of them holds data from a service. The issue is that I need to filter them in order to work together like: if I choose a company in the first dropdown list, only the reps inside of that company should display in the other dropdown list.
I tried using | filter: byID as I followed in Angularjs documentation but I do not think it is the right way of doing this don't know.
HTML:
<label class="item item-input item-select"">
<div class="input-label">
Company:
</div>
<select>
<option ng-repeat="x in company">{{x.compname}}</option>
<option selected>Select</option>
</select>
</label>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Rep:
</div>
<select>
<option ng-repeat="x in represent">{{x.repname}}</option>
<option selected>Select</option>
</select>
</label>
Javascript:
/*=========================Get All Companies=========================*/
$http.get("http://localhost:15021/Service1.svc/GetAllComp")
.success(function(data) {
var obj = data;
var SComp = [];
angular.forEach(obj, function(index, element) {
angular.forEach(index, function(indexN, elementN) {
SComp.push({compid: indexN.CompID, compname: indexN.CompName});
$scope.company = SComp;
});
});
})
/*=========================Get All Companies=========================*/
/*=========================Get All Reps=========================*/
$http.get("http://localhost:15021/Service1.svc/GetAllReps")
.success(function(data) {
var obj = data;
var SReps = [];
angular.forEach(obj, function(index, element) {
angular.forEach(index, function(indexN, elementN) {
SReps.push({repid: indexN.RepID, repname: indexN.RepName, fkc :indexN.fk_CompID});
$scope.represent = SReps;
});
});
})
/*=========================Get All Reps=========================*/
解决方案
You may solve this problem like my solution process: my solution like your problem. at first show District list and show Thana list according to selected District. using filter expression
In HTML:
<div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> District List</label></div>
<div class="col-md-4">
<select class="form-control" ng-model="selectedDist" ng-options="district.name for district in districts">
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Thana List</label></div>
<div class="col-md-4">
<select class="form-control" ng-model="selectedThana" ng-options="thana.name for thana in thanas | filter: filterExpression">
<option value="">Select</option>
</select>
</div>
</div>
</form>
</div>
In controller:
$scope.selectedDist={};
$scope.districts = [
{id: 1, name: 'Dhaka'},
{id: 2, name: 'Goplaganj'},
{id: 3, name: 'Faridpur'}
];
$scope.thanas = [
{id: 1, name: 'Mirpur', dId: 1},
{id: 2, name: 'Uttra', dId: 1},
{id: 3, name: 'Shahabag', dId: 1},
{id: 4, name: 'Kotalipara', dId: 2},
{id: 5, name: 'Kashiani', dId: 2},
{id: 6, name: 'Moksedpur', dId: 2},
{id: 7, name: 'Vanga', dId: 3},
{id: 8, name: 'faridpur', dId: 3}
];
$scope.filterExpression = function(thana) {
return (thana.dId === $scope.selectedDist.id );
};
N.B: Here filterExpression is a custom function that return values when selected district id equal dId in thana.
这篇关于与下拉Angularjs筛选数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
