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

Question

我在 AngularJS 上有一个选择，其中显示了我从 API 获得的状态。这些状态是合约的可能状态。

我还从 API 获取了包含每个合约实际状态的合约。我希望根据我从 API 获得的状态，仅显示特定值。

例如，如果我从 API 获取 Accept 值，我希望只有 Accept 和 No Accept 选项会显示在选择。与 In Progress 和 CancelProgress 选项的情况相同。

为了了解情况，我重现了一个简单的示例:

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 Progress 和 CancelProgress 选项应该可用，而不是所有选项。

如何处理这些选择以仅在 AngularJS 上显示特定值？

P.S:我无权访问该 API，因此无法修改它的响应。

提前致谢!

Answer 1

如果我理解正确，您需要根据 $scope.selected 更改状态的值

我认为最好的方法是创建一个具有所选状态的可能状态的 API，并使用它来填充选择

例如

string[] getStates(int stateId)