[英]Angularjs Filter data with dropdown
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. 我是angularjs和javascript的新人,所以请善待,我有两个下拉项目(离子选择)他们都持有服务数据。 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
我尝试使用
| filter: byID
| filter: byID
as I followed in Angularjs documentation but I do not think it is the right way of doing this don't know. | filter: byID
我在Angularjs文档中遵循的byID,但我不认为这是正确的做法,不知道。
HTML: 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: 使用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 .
根据选定的区域 ,首先显示区域列表并显示Thana列表。 using filter expression
使用过滤表达式
In HTML: 在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 );
};
NB: Here filterExpression is a custom function that return values when selected district id equal dId in thana. 注意:这里filterExpression是一个自定义函数,当选择的区域id等于dId时返回值。
var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope,$window, $http) { $scope.myFunc = function(x) { $scope.name = x.Name; $scope.country = x.Country; $scope.city = x.City; $scope.x = x; $("#myModal").modal(); }; $scope.saveData = function(x) { if(x == ''){ x = angular.copy($scope.names[0]); x.Name = $scope.name; x.Country = $scope.country; x.City = $scope.city; $scope.names.push(x); } else{ x.Name = $scope.name; x.Country = $scope.country; x.City = $scope.city; } }; $scope.newData = function() { $scope.name = ""; $scope.country = ""; $scope.city = ""; $scope.x = ""; $("#myModal").modal(); }; $scope.myDelete = function(x) { if(x.Name=='' && x.Country=='' && x.City==''){ var index = $scope.names.indexOf(x); $scope.names.splice(index, 1); } else{ var deletedata = $window.confirm('are you absolutely sure you want to delete?'); if (deletedata) { alert('i am'); var index = $scope.names.indexOf(x); $scope.names.splice(index, 1); } } }; $scope.filterExpression = function(x) { //alert($scope.country.id); return (x.countryId === $scope.country.countryId ); }; $scope.names = [{"Name":"Alfreds Futterkiste","City":"","Country":""},{"Name":"Ana Trujillo Emparedados y helados","City":"","Country":""}] $scope.countryList = [ {countryName : "Pakistan", countryId : 1}, {countryName : "UK", countryId : 2}, {countryName : "Sweden", countryId : 3} ]; $scope.cityList = [ {cityName : "Karachi", cityId : 1, countryId:1}, {cityName : "London", cityId : 2, countryId:11}, {cityName : "Sweden City", cityId : 3, countryId:3} ]; });
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <style> .table tr { cursor: pointer; } </style> <div class="container" ng-app="myApp" ng-controller="customersCtrl"> <pre>{{names}}</pre> <h2>Hover Rows</h2> <p>The .table-hover class enables a hover state on table rows:</p> <table class="table table-hover"> <thead> <tr> <th>Sr.No</th> <th>Name</th> <th>Country</th> <th>City</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="x in names" ng-dblclick="myFunc(x)" > <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country.countryName }}</td> <td>{{ x.City.cityName }}</td> <td><span class="glyphicon glyphicon-remove" ng-click="myDelete(x)"></span></td> </tr> </tbody> <tfoot> <tr ng-click="newData()"> <td colspan="4"> </td> <td> <span class="glyphicon glyphicon-plus" ng-click="newData()" cursor="" ></span> </td> </tr> </tfoot> </table> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title" ng-if="x!=''">Edit Record</h4> <h4 class="modal-title" ng-if="x==''">Save Record</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name" ng-model="name"> </div> <div class="form-group"> <label for="country">Country:</label> <!-- <input type="text" class="form-control" id="country" ng-model="country"> --> <select class="form-control" ng-model="country" ng-options="x.countryName for x in countryList"></select> </div> <div class="form-group"> <label for="country">City:</label> <select class="form-control" ng-model="city" ng-options="x.cityName for x in cityList | filter:filterExpression"></select> </div> <input type="hidden" ng-model="x" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveData(x)">Save</button> <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="myDelete(x)" ng-if="x!=''">Delete</button> </div> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.