Filter data in angular select based on condition

问题:

I have a select option in my Angular page. The options are fetched from the API.

My HTML is :

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

My controller is :

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

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

How can I achieve this?

Please let me know if more details are required in the question.

回答1:

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;

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>

回答2:

you can one thing also:

in controller code:

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

then use $scope.FinalData as your array. Let me know for more clarification.