根据条件过滤角度选择数据

时间:2016-10-18 12:38:50

标签: angularjs drop-down-menu

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

的选项

我怎样才能做到这一点?

如果问题需要更多详细信息,请与我们联系。

2 个答案:

答案 0 :(得分:1)

下面我已经制作了代码段,它会在下拉列表中显示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>

答案 1 :(得分:0)

你也可以做一件事:

控制器代码中的

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作为您的数组。 让我知道更多的说明。