如何根据 angularjs 中的其他变量更改 ng-options 值？

Question

我想根据复选框更改下拉菜单。因此，如果选中复选框，则仅显示特定项目。

 <script>
angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    
    $scope.colors=[
      {id:1, name:'black'},
      {id:2, name:'red'}, 
      {id:3, name:'white'},
    ]
    $scope.myColor = $scope.colors[2]; // red
    $scope.isFlagOn = false;

    function showFlag(){
      if ($scope.isFlagOn){
        return [$scope.colors.find(s => s.name === $scope.myColor)];
      }
      else{
        return $scope.colors
      }
    }

  }]);
</script>
<div ng-controller="ExampleController">

  <label>
     isFlagOn <input type="checkbox" ng-model="$scope.isFlagOn">
 
  
  </label>
  <br/><br/>
  <select ng-model="myColor" ng-options="color as color.name for color in $scope.showFlag() track by color.id">
    <option value="">Choose one</option>
    </select><br/><br/>

</div>

如果复选框被选中，我只想在这里显示红色选项。是否可以使用 `ng-options`？
谢谢，

Answer 1

这是另一种方式。你可以过滤你的 ng-options:

ng-options="color.id as color.name for color in colors | filter:{name: isFlagOn? myColor.name : ''} "

此外，$scope 已绑定到您的 HTML - 其中的每个 变量都会自动 $scope，因此您无需使用它在 HTML 中，只有 JS（例如控制器）。

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [{id: 1, name: 'black'},
      {id: 2, name: 'red'},
      {id: 3,name: 'white'},
    ]
    $scope.myColor = $scope.colors[2]; // red
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="selectExample">
<div ng-controller="ExampleController">
  <label> isFlagOn <input type="checkbox" ng-model="isFlagOn">
  </label>
  <br/><br/>
  <select ng-model="myColor" ng-options="color.id as color.name for color in colors | filter:{name: isFlagOn? myColor.name : ''} ">
    <option value="">Choose one</option>
  </select><br/><br/>
</div>
</div>

如何根据 angularjs 中的其他变量更改 ng-options 值？

How can I change ng-options value depends on other variable in angularjs?

javascript

angularjs