根据条件在角度选择中过滤数据 [英] Filter data in angular select based on condition
问题描述
我的Angular页面中有一个select选项。这些选项是从API提取的。
I have a select option in my Angular page. The options are fetched from the API.
我的HTML是:
<div>
<form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal" ng-controller="getReservationController">
<fieldset>
<div class="control-group">
<label class="control-label" for="reservation.account.name">Account Name<sup>*</sup></label>
<div class="controls">
<select ng-model="reservation.account.id" required>
<option ng-repeat="p in accounts" value="{{p.id}} ">{{p.name}}</option>
</select>
</div> <!-- /controls -->
</div> <!-- /control-group -->
</fieldset>
</form>
</div>
我的控制器是:
myApp.controller('getReservationController', ['$scope', 'reservationServices', 'dataTable', '$rootScope', '$location', '$filter', function ($scope, reservationServices, dataTable, $rootScope, $location, $filter) {
reservationServices.getReservations().then(function (result) {
$scope.data = result.data;
$scope.data.currentUser = $rootScope.userInfo.UserId;
});
}]);
Services.js:
Services.js :
myApp.factory('reservationServices', ['apiServices', function (apiServices) {
var factoryDefinitions = {
getReservations: function () {
return apiServices.getFromTalentPool('/reservations').success(function (data) { return data; });
},
getAccounts: function () {
return apiServices.getFromHRIS('/customeraccount').success(function (data) { return data; });
}
}
return factoryDefinitions;
}
]);
select选项显示API中的所有帐户。我希望它仅显示满足条件的选项 data.currentUser == p.account.programManager.id
The select options displays all the accounts from the API. I want it to only display options that meets the condition data.currentUser==p.account.programManager.id
我该如何实现?
请让我知道问题中是否需要更多细节。
Please let me know if more details are required in the question.
推荐答案
下面,我制作了代码段,该代码段将在下拉列表中显示具有 p.id = 10
的用户,其中可以有多个用户,在您的情况下 $ scope.userId = $ rootScope.userInfo.UserId;
Below I have made code snippet which will display the users with p.id=10
in the dropdown where there can be multiple users,in your case $scope.userId =$rootScope.userInfo.UserId;
并在html中添加以下代码
And in html add below code
<select ng-model="reservation.account.id" required>
<option ng-repeat="p in accounts" ng-if="p.id ==userId " value="{{p.id}} ">{{p.name}}</option>
</select>
angular.module('app', []);
angular.module('app').controller('getReservationController', function($scope) {
$scope.reservation = {};
$scope.reservation.id = 10;
$scope.accounts = [{
"id": 10,
"name": "Admin"
}, {
"id": 12,
"name": "User"
}, {
"id": 5,
"name": "Super user"
}, {
"id": 1,
"name": "Super Admin"
}, {
"id": 10,
"name": "Admin2"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal" ng-controller="getReservationController">
<fieldset>
<div class="control-group">
<label class="control-label" for="reservation.account.name">Account Name<sup>*</sup>
</label>
<div class="controls">
<select ng-model="reservation.id" required>
<option ng-repeat="p in accounts" ng-if="p.id=='10'" value="{{p.id}} ">{{p.name}}</option>
</select>
</div>
<!-- /controls -->
</div>
<!-- /control-group -->
</fieldset>
</form>
</div>
这篇关于根据条件在角度选择中过滤数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!