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

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选项">
谢谢，

Answer 1

这是另一种方法。你可以用过滤你的ng选项

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>