Question

我在下拉菜单中发现了这个错误：

           <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'];

当我运行它并选择Nation时，我可以在控制台中读取此错误：

angular.js：14525错误：[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>

Answer 1

按$ index

添加曲目

<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>

这是因为您的数组无法识别。你的模型也需要与你迭代的数组不同。

Answer 2

您有重复的密钥，请使用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

Answer 3

除了您的错误之外，值得指出的是，所有下拉列表项的“值”都是相同的，因为您只根据当前正在迭代的项目动态更新显示的文本

所以我试试这个：

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

Answer 4

从选项标记中删除value属性：

<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>

如果您真的希望这些值成为您提供的列表中的每个国家/地区，那么在value属性（'nazioni'）中包含一个简单的字符串将导致您的所有选项具有相同的值（'nazioni'）。 / p>

下拉列表选择错误

4 个答案: