根据条件在角度选择中过滤数据答案

【问题标题】：Filter data in angular select based on condition根据条件在角度选择中过滤数据
【发布时间】：2016-10-18 22:02:27
【问题描述】：

我的 Angular 页面中有一个选择选项。这些选项是从 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：

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;
}
]);

选择选项显示 API 中的所有帐户。我希望它只显示满足data.currentUser==p.account.programManager.id条件的选项

我怎样才能做到这一点？

如果问题需要更多详细信息，请告诉我。

【问题讨论】：

您可以循环数据并根据控制器中的条件将其放入数组中。
我是 Angular 新手，仍处于学习阶段。你能告诉我如何在答案中做到这一点吗？
你能提供你的数据源吗？如果你能模仿你的 HTTP 调用并制作一个很棒的 plunker
我不确定我在问题中提到的条件是否属实。我会尽力为您提供数据。请给我几分钟。
我不知道如何为您提供数据源。我使用相同的控制器在不同的页面中实现了这个条件。我将添加手表的屏幕截图。也许这有帮助。我也不知道如何配置小提琴 :( 截图：i.imgsafe.org/61ee4b4d8a.jpg

标签： angularjs drop-down-menu

【解决方案1】：

下面我编写了代码 sn-p 它将在下拉列表中显示带有p.id=10 的用户，其中可以有多个用户，在您的情况下为$scope.userId =$rootScope.userInfo.UserId;

并在html中添加以下代码

<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>

【讨论】：

非常感谢！这就是我一直在寻找的。你帮了我很多。 :)
我遇到了日期时间选择器的另一个问题。我会尽快发布问题。如果您能抽出时间，请检查一下。即使我无法提供详细信息，您似乎也很好地理解了我的问题。再次Tnx :)
随时欢呼 :) 发布问题后 Ping 链接 ;)
stackoverflow.com/questions/40112481/…
还告诉我是否应该在日期选择器验证中使用与我使用的方法不同的方法。

【解决方案2】：

你也可以做一件事：

在控制器代码中：

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;
        $scope.FinalData = $filter('filter')($scope.data, { currentUser : p.account.programManager.id });
});
}]);

然后使用 $scope.FinalData 作为您的数组。让我知道以获得更多说明。

【讨论】：

您可以根据需要使用 $scope.data.currentUser 而不是 p.account.programManager.id。