angular js 中 angular select 选项的条件？

Question

在我的 angular 项目中，我有一个带有选项的 select 元素。 作为选项，我使用 ng-repeat 进行循环。 所以在选项中，我有四个不同的选项。 我有四个不同的盒子。 如果我 select 任何基于这些框的选项将隐藏和显示。 这个怎么做？ 任何人请帮我解决这个问题。

这是我的 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>

HTML 箱码：

<div class="boxone"></div>
<div class="boxtwo"></div>
<div class="boxthree"></div>
<div class="boxfour"></div>

这是我的js代码：

AUTHORIZATION_TYPES = {
  1 : "None",
  2 : "Basic",
  3 : "Bearer",
};

Answer 1

您可以使用ng-if可以有选择地呈现元素。

变量filter.environment将更改为用户 select 选项。 它将保存您的 object 的key 。 因此，在标记中：

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

Answer 2

您可以使用任何 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 只是隐藏它们，您必须根据需要选择一个。