2017-08-17 104 views
1

我發現像這樣的下拉菜單此錯誤:錯誤在下拉列表中選擇

  <div class='dropdown'> 
      <span>Seleziona Nazione:  </span> 
      <select class='opzioni' ng-model="nazioni"> 
      <option ng-repeat="nazione in nazioni" value='nazione'>{{nazione}} 
      </option> 
      </select> 
      </div> 

在我的控制,我有這樣的代碼:

  $scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia', 'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda', 'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia', 'Svizzera', 'Ucraina']; 

當我運行它,我選擇一個國家,我可以在控制檯讀取這個錯誤:

angular.js:14525 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.6.4/ngRepeat/dupes?p0=nazione%20in%20nazioni&p1=string%3An&p2=n

我再次得到了同樣的錯誤,當我使用來自數據庫列表,像這樣的:

  $http.get('/api/teams').then(function(response){ 
     $scope.teams = response.data; 
     console.log(response.data); 
    }); 

而在HTML:

  <div class='SquadraCasa'> 
     <span>Seleziona Squadra Casa:  </span> 
     <select class='opzioni' ng-model="teams"> 
     <option ng-repeat="team in teams" value='team.Nome'>{{team.Nome}} 
     </option> 
     </select> 
     </div> 

回答

3

由$指數添加軌道

<div class='dropdown'> 
     <span>Seleziona Nazione:  </span> 
     <select class='opzioni' ng-model="nazioniSelected"> 
     <option ng-repeat="nazione in nazioni track by $index" value='{{nazione}}'>{{nazione}} 
     </option> 
     </select> 
</div> 

also can improve like this, 

<div class='dropdown'> 
     <span>Seleziona Nazione:  </span> 
     <select ng-options="item as item for item in nazioni track by $index" class='opzioni' ng-model="nazioniSelected"> 
     <option value="">Select...</option> 
     </select> 
</div> 

這是因爲您的陣列不可識別。你的ng模型也需要和你迭代的數組不同。

+0

答案中的第一個例子不會按預期工作。問題仍然是選擇中的每個選項都將具有「nazione」的值。 – chambo

+0

你是對的。讓我更新。 –

1

你有重複鍵,使用track by $index a.e:

<select class='opzioni' ng-model="selectedNazioni"> 
     <option ng-repeat="nazione in nazioni track by $index" >{{nazione}} 
     </option> 
</select> 

控制器:

$scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia', 'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda', 'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia', 'Svizzera', 'Ucraina']; 
    // set default value 
    $scope.selectedNazioni = 'Austria'; 

DEMO

1
從你的錯誤

除此之外,值得指出的是,所有的下拉菜單項的「價值」將動態地根據該項目您當前迭代是一樣的,因爲你只更新顯示的文本在

所以我想試試這個:

<option ng-repeat="nazione in nazioni" value='{{nazione}}'>{{nazione}} 
    </option> 
1

從選項標籤刪除的值屬性:

<div class='dropdown'> 
    <span>Seleziona Nazione:  </span> 
    <select class='opzioni' ng-model="nazioni"> 
     <option ng-repeat="nazione in nazioni">{{nazione}} 
     </option> 
    </select> 
</div> 

或改變它綁定到適當的數據:

<div class='SquadraCasa'> 
    <span>Seleziona Squadra Casa:  </span> 
    <select class='opzioni' ng-model="teams"> 
     <option ng-repeat="team in teams" value='{{team.Nome}}'>{{team.Nome}} 
     </option> 
    </select> 
</div> 

具有的值屬性一個簡單的字符串(「Nazioni酒店」)將導致所有選項具有相同的值('nazioni'),如果您確實希望這些值是您提供的列表中的每個國家/地區。