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 只是隱藏它們，您必須根據需要選擇一個。