Javascript angular js中angular select选项的条件？

在我的角度项目中，我有一个带有选项的select元素。对于选项，我使用ng repeat进行循环。在选项中，我有四个不同的选项。我有四个不同的盒子。如果我选择任何选项，这些框将隐藏并显示。 如何做到这一点？任何人请帮我解决这个问题

这是我的HTML代码：

<select select2 id="environment" name="environment"
              ng-model='filter.environment' data-live-search="true"
        <option ng-repeat="(key,value) in authorizationtype" value="{{key}}"
                ng-bind="value"></option>
      </select>

可以使用可以有选择地渲染元素的

变量

filter.environment

将在用户选择选项时更改。它将保存对象的

键。因此，在标记中：

<div ng-if="filter.environment === 1" class="boxone"></div>

您可以使用任何ng show/ng hide或ng if指令来实现这一点

<div class="boxone"></div>
<div ng-show="filter.environment == 1" class="boxtwo"></div>
<div ng-show="filter.environment == 2" class="boxthree"></div>
<div ng-show="filter.environment == 3" class="boxfour"></div>



ng if删除html元素，而ng show/ng hide仅隐藏它们，您必须根据需要选择一个。
基于
过滤器使用
ng if
。我添加的环境
，但它不会更改。所有的盒子都是可见的。不根据单击选项更改。问题是关于AngularJS的，但您的答案是Angular.Edited。然而，唯一的区别是*如果

，它是

ng，而不是
ngIf
，正确的文档链接是。这是ngIf指令，但HTML属性是ng-if.Edited。NG1的答案非常感谢，非常完美。很高兴我能帮上忙。
<div ng-if="filter.environment === 1" class="boxone"></div>

<div class="boxone"></div>
<div ng-show="filter.environment == 1" class="boxtwo"></div>
<div ng-show="filter.environment == 2" class="boxthree"></div>
<div ng-show="filter.environment == 3" class="boxfour"></div>