AngularJS ngHide和ngShow取決於<select>選項

Question

我試圖根據您在標記中使用ngHide/ngShow選擇的選項更改視圖，但似乎無法弄清楚如何使其工作。

這是我目前的想法：

<header class="hero-unit" id="banner" ng-include="'components/header/header.html'"></header> 

<div ng-include="'components/navbar/navbar.html'"></div> 


<div class="container"> 
    <h3 class="site-headline">Opret nyt produkt</h3> <hr> 
    <form> 
     <div class="container jumbotron"> 
      <div class="col-md-12"> 
       <select> 
        <option ng-repeat="option in options" name="chosenOption"> 
         {{ option.name }} 
        </option> 
       </select> 
      </div> 

      <div ng-show="{{ option.name }} == 'Pool'" ng-include="'new-pool.html'"></div> 

     </div> 
    </form> 
</div> 

<footer class="footer" ng-include="'components/footer/footer.html'"></footer> 

BU我似乎無法訪問{{選項}}，這是有道理的，因爲我出了NG-重複範圍。

我試圖使這個方法：

$scope.setProduct = function(productName){ 
    $scope.product = productName; 
    console.log($scope.product); 
}; 

而且只需調用上的選擇標記的NG-變化，設置product.name = chosenOption。它打印出正確的$ scope.product，但不顯示ng-include。

我似乎無法將我的頭圍住它，並可以使用援助之手。

Answer 1

您需要添加一個ng-model到<select>：

<div class="container jumbotron"> 
    <div class="col-md-12"> 
     <select ng-model="selectedOption"> 
      <option ng-repeat="option in options" name="chosenOption"> 
       {{ option.name }} 
      </option> 
     </select> 
    </div> 

    <div ng-show="selectedOption.name == 'Pool'" ng-include="'new-pool.html'"></div> 

</div> 

上選擇的ng-model將被設置爲當前選擇的對象。