ng-如果不起作用-Angular 1

Question

有點卡住...我有兩個輸入/重復單選按鈕。

此代碼循環遍歷對象數據數組，並返回飲料名稱和價格。 例如，名稱：“茶”，價格：“ 1.00”。

<div class="field">
 <label class="radio" ng-repeat="drink in grindsIndex.menuDrinks" >
  <input id='drinkRadio' type="radio" ng-model="value" value="{{ 
   drink.price }}" placeholder="{{ drink.name }}" name="name" ng-
   model="grindsIndex.name" ng-change="drinkValue(value)" ng-
   click="clickMethod()"; [checked]="idx === 0" ng-class="{selected: 
   drink.selected === true}"/>
    {{ drink.name }}  &nbsp
    {{ drink.price }}
 </label>
</div> 

當某人單擊“茶”單選按鈕時，我希望這組單選按鈕出現...但是NG-IF似乎不起作用。

    <div class="field" ng-if="drink.name == 'tea'">
    <label class="radio" ng-repeat="drink in grindsIndex.menuDrinks" >
    <input type="radio" ng-model="value" value="{{ drink.price }}" placeholder="{{ drink.select }}" name="select" ng-model="grindsIndex.name" ng-change="drinkValue(value)" ng-click="clickMethod()"/>
    {{ drink.select }}  &nbsp
    {{ drink.price }}

    </label>
  </div>

基本上我想說的是，如果Drink.name ==='tea'，請顯示這些單選按鈕...

有任何想法嗎？

Answer 1

這是因為ng-if =“ drink.name =='tea'”內的Drink.name未定義，因為它不在ng-repeat的范圍內。 您可以做的是使用第一個輸入ng-model =“ value”的ng-model作為

ng-if="value.name == 'tea'"

或者您可以創建一個新變量，並在第一次單擊ng-click或ng-change時滿足條件時將其設置為true。

<div class="field" ng-if="displayTea">
</div>

並在控制器中將此新變量設置為true，當滿足條件時

$scope.clickMethod = function(){
    if(someConditionIsMet)
        displayTea = true;
}