如何让 ng-model 在 ng-if 中工作？

Question

我需要隐藏和显示 div on change of select 框，它已经在 ng-if 中。这是代码。请帮助我。

<div class="col-sm-6">
    <select name="" id="print-type" class="form-control" ng-model="printType">
        <option value="selectOne" selected>Select One</option>
        <option value="selectTwo">Wall Decoration</option>
    </select>
</div>
<div class="col-sm-6" ng-if="printType == 'selectTwo'">
     <select name="" id="wall-decoration" class="form-control" ng-model="wallDecorDropdown">
          <option value="One">Select One</option>
          <option value="two">Framed Print</option>
     </select>
</div>

<div ng-if="wallDecorDropdown == 'two'">Hi</div>

非常感谢。

Answer 1

您违反了始终在 ng-model

中使用对象的黄金法则

问题是 ng-if 创建了一个子作用域。因此，当您更改该子范围内的基元时 ng-model="wallDecorDropdown" 它对父范围是隐藏的，因为基元不具有与 objects/arrays 相同的继承方式

更改为：

<div class="col-sm-6" ng-if="printType == 'wallDecor'">
     <select name="" id="wall-decoration" class="form-control" ng-model="myScopeModel.wallDecorDropdown">
          <option value="One">Select One</option>
          <option value="two">Framed Print</option>
     </select>
</div>

<div ng-if="myScopeModel.wallDecorDropdown == 'two'">Hi</div>

并在控制器中创建一个将被所有子作用域继承的对象

$scope.myScopeModel ={}

This 3 minute Egghead video 值得一看，以便更好地理解。

如何让 ng-model 在 ng-if 中工作？

How to make ng-model work in ng-if?

angularjs

drop-down-menu

angular-ng-if

dropdown