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将被设置为当前选择的对象。