如何根据其他值在选择项上显示特定值？

Question

I have a select on AngularJS in which I show states that I get from an API. These states are the possible states of a contract.

I also get the contracts with the actual state of each contract from the API. I want that depending of this state that I am getting from the API, only specific values will be shown.

For example, if I am getting Accept value from the API I want that only Accept and No Accept options will be shown on the select . Same situation with In progress and CancelProgress options.

To get in situation I have reproduce a simple example:

 function StatesController($scope) { $scope.contracts = [{ IdContract: "1", ActualState: "No Accept" }, { IdContract: "2", ActualState: "In progress" }, { IdContract: "3", ActualState: "Accept" }]; $scope.states = [{ StateName: "Accept" }, { StateName: "No Accept" }, { StateName: "In progress", }, { StateName: "CancelProgress" }]; } 

 table, th , td { border: 1px solid grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <div ng-app ng-controller="StatesController"> <table> <tr ng-repeat="contract in contracts"> <td>{{contract.IdContract}}</td> <td>{{contract.ActualState}}</td> <td> <select ng-model="States" name="State"> <option ng-repeat="state in states" ng-selected="state.StateName == contract.ActualState" value="{{state.StateName}}">{{state.StateName}}</option> </select> </td> </tr> </table> </div> 

In this particular case, only In progress and CancelProgress options should be available instead of all options.

How can I treat these select to show only specific values on AngularJS?

PS: I do not have access to the API so I cannot modify the response of it.

Thanks in advance!

Answer 1

If I understood correctly, you need to change the value of states depending on $scope.selected

I think the best approach is to create an API with the possible states for the selected state and use it to fill the select

eg

string[] getStates(int stateId)

Answer 2

If you can't change the API, you have no other choice than have a correspondance table on your side, listen to changes on $scope.selected and filter the array.

In the actuale state, if the state names don't change, you can filter the array on StateName.indexOf("accept") or StateName.indexOf("progress")

EDIT:

The only solution I see without modifying the model (by adding a stateType property for example) is to have one select element by state type (harcoded).

If contract is of type "progress" display a filtered select element. If contract is of type "accept" display a filtered select element.

 function StatesController($scope) { $scope.contracts = [{ IdContract: "1", ActualState: "No Accept" }, { IdContract: "2", ActualState: "In progress" }, { IdContract: "3", ActualState: "Accept" }]; $scope.states = [{ StateName: "Accept" }, { StateName: "No Accept" }, { StateName: "In progress", }, { StateName: "CancelProgress" }]; $scope.stateType = function(type) { return $scope.states.filter(function(state) { return ~state.StateName.toLowerCase().indexOf(type); }); } $scope.isType = function(contract, type) { return ~contract.ActualState.toLowerCase().indexOf(type); } } 

 table, th , td { border: 1px solid grey; } select { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <div ng-app ng-controller="StatesController"> <table> <tr ng-repeat="contract in contracts"> <td>{{contract.IdContract}}</td> <td>{{contract.ActualState}}</td> <td> <select ng-model="States" name="State" ng-show="isType(contract, 'accept')"> <option ng-repeat="state in stateType('accept')" ng-selected="state.StateName == contract.ActualState" value="{{state.StateName}}">{{state.StateName}}</option> </select> <select ng-model="States" name="State" ng-show="isType(contract, 'progress')"> <option ng-repeat="state in stateType('progress')" ng-selected="state.StateName == contract.ActualState" value="{{state.StateName}}">{{state.StateName}}</option> </select> </td> </tr> </table> </div> 

To make things a little cleaner, you could also dynamically add a property stateType to each of the contracts in the array you get from the API.

This way I think you can get rid of the 2 selects and just filter the array in the second ng-repeat.