代码之家 › 专栏 › 技术社区 › jayko03

如何根据angularjs中的其他变量更改ng选项值?

angularjs javascript

jayko03 · 技术社区 · 3 年前

 <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选项”?
谢谢

1 回复 | 直到 3 年前

Kinglish 3 年前

还有一种方法。您可以使用以下选项筛选ng选项:

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

而且 $scope 已绑定到您的HTML- 因此,在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>