0

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.

Phoenix
  • 285
  • 9
  • 28
  • you can loop on data and put it in array based on condition in controller. – Prasad Shigwan Oct 18 '16 at 12:49
  • Im new to angular and still in learning phase. Can you please show me how to do that in the answer? – Phoenix Oct 18 '16 at 12:53
  • can you provide your data scource and if you can mime your HTTP calla nd make a plunker that would be great – ngCoder Oct 18 '16 at 12:55
  • I am not sure if the condition I mentioned in the question is true. I will try to provide the data to you tho. Please give me few mins. – Phoenix Oct 18 '16 at 12:57
  • I am not sure how to provide you the data source. I have this condition implemented in a different page using the same controller. I will add a screenshot of the Watch. Maybe that helps. I dont know how to configure fiddle either :( Screenshot : https://i.imgsafe.org/61ee4b4d8a.jpg – Phoenix Oct 18 '16 at 13:09
  • If I understand your question correctly, you wish to filter data according to the conditions in HTML? Why not filter the data in the controller after receiving it from the service? Like the solution below. – Sushant Oct 18 '16 at 13:33

2 Answers2

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>
ngCoder
  • 2,095
  • 1
  • 13
  • 22
  • Thanks a lot! That's what i was looking for. You've helped me a lot. :) – Phoenix Oct 18 '16 at 14:03
  • I have another issue with date time picker. I will post the question soon. Please have a check on it if you can spare the time. You seem to understand my question well even though I was not able to provide the details. Tnx again :) – Phoenix Oct 18 '16 at 14:04
  • Cheers anytime :) Ping the link after you post the question ;) – ngCoder Oct 18 '16 at 14:06
  • http://stackoverflow.com/questions/40112481/date-picker-validation-in-angularjs-not-working – Phoenix Oct 18 '16 at 15:38
  • Also tell me if I should use a different approach in date picker validation than what I have used. – Phoenix Oct 19 '16 at 04:40
0

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.

Prasad Shigwan
  • 520
  • 5
  • 14