根据条件在角度选择中过滤数据 [英] 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屋！