下拉菜單上的angularjs空選擇

Question

我偶然發現了angularjs的一個問題。我最近開始瞭解它，但遇到了一個問題。我發現有幾個人遇到了同樣的問題，但他們的編碼與我大部分完全不同。所以，我能夠把東西放在一起。在任何情況下，這都是我想要做的：在我的表單中，下拉菜單自動選擇第一個選項，由於某種原因（與angularjs默認保護或某事有關）是空白的。

在嘗試下面的代碼之前，代碼到目前爲止一直工作正常。現在，形式的最後一部分，如下圖所示，星星總是打開，無論什麼時候事實上只有在被問到時纔打開。此外，由於錯誤的編碼，即使該部分沒有正常工作（由於錯誤的編碼）。我相信通過糾正下面代碼中的主要問題，所有小問題都將在此過程中得到解決。

總之，這是下面的HTML（其次是JS部分）：

<blockquote ng-repeat="review in product.reviews"> 
       <b>Stars: {{select.stars}}</b> 
       {{review.body}} 
       <cite>by: {{review.author}}</cite> 
      </blockquote> 

      <form name="reviewForm"> 

      <blockquote> 
       <b> Stars: {{select.stars}}</b> 
       <br/> 
       <b> Review: {{review.body}}</b> 
       <br/> 
       <cite>by: {{review.author}}</cite> 
      </blockquote> 

       <!--<select ng-controller="starsController" ng-model="review.stars" name="stars" id="stars" style="margin-bottom:10px;margin-left:36px;width:350px;">--> 

       <select ng-controller="starsController" ng-model="select" name="stars" id="stars" ng-options="option.name for option in typeOptions"> 
        <optgroup label="Rate the product"> 
        <option value="1 star" name="1 star">1 star</option> 
        <option value="2 stars" name="2 stars">2 stars</option> 
        <option value="3 stars" name="3 stars">3 stars</option> 
        <option value="4 stars" name="4 stars">4 stars</option> 
        <option value="5 stars" name="5 stars" selected="selected">5 stars</option> 
        </optgroup> 
       </select> 

JS

app.controller("starsController", 
function MyCtrl($scope) { 

    $scope.typeOptions = [ 
    { name: '1 star', value: '1 star' }, 
    { name: '2 stars', value: '2 stars' }, 
    { name: '3 stars', value: '3 stars' }, 
    { name: '4 stars', value: '4 stars' }, 
    { name: '5 stars', value: '5 stars' } 
    ]; 

    $scope.select = $scope.typeOptions[4]; 

    } 
    ); 

Answer 1

我會做這樣的事情：

HTML：

<select ng-model="select" ng-options="option.name for option in typeOptions"></select> 

JS：

$scope.typeOptions = [ 
{ name: '1 star', value: '1 star' }, 
{ name: '2 stars', value: '2 stars' }, 
{ name: '3 stars', value: '3 stars' }, 
{ name: '4 stars', value: '4 stars' }, 
{ name: '5 stars', value: '5 stars' } 
]; 

$scope.select = $scope.typeOptions[4]; 

Pluker

Select documentation on docs.angularjs