Comment faire fonctionner ng-model dans ng-if?

Question

Je dois cacher et montrer le div sur le changement de la boîte de sélection, qui est déjà dans ng-if. Voici le code. Aidez-moi, s'il vous plaît.

<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> 

Merci beaucoup.

Answer 1

Vous enfreignez la règle d'or d'utiliser toujours un objet dans ng-model

Le problème est que ng-if crée un champ d'enfant. Ainsi, lorsque vous modifiez une primitive à l'intérieur que la portée des enfants ng-model="wallDecorDropdown" il est caché du champ parent puisque les primitives n'ont pas l'héritage les mêmes objets façon/tableaux font

Modification:

<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> 

Et dans le contrôleur créer un objet qui sera héritée par tous les enfants étendues

$scope.myScopeModel ={} 

This 3 minute Egghead video vaut bien regarder pour mieux comprendre.