"粘性"选择Angular应用程序

Question

对于具有基于Angular的前端的应用程序,我有一个恼人的问题.某个选择框是"粘滞的" - 您必须选择两次选项才能更改它.这是一个重现问题的片段:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
  var app = angular.module('myapp', []);

  app.controller('NewsCtrl', function($scope) {
    // Set news data
    $scope.news = {
      specific_for_dealership: '003'
    };

    // Get dealers
    $scope.dealers = [{
      id: 1,
      dealerid: '001',
      name: 'Volvo'
    }, {
      id: 2,
      dealerid: '002',
      name: 'Saab'
    }, {
      id: 3,
      dealerid: '003',
      name: 'Seat'
    }];
  });
</script>
<div ng-app="myapp">
  <div ng-controller="NewsCtrl">
    <form>
      <select name="specific_for_dealership" ng-model="news.specific_for_dealership">
        <option value="">All</option>
        <option ng-repeat="dealer in dealers" ng-selected="news.specific_for_dealership" value="{{ dealer.dealerid }}">{{ dealer.name }}</option>
      </select>
    </form>
  </div>
</div>

知道出了什么问题以及如何解决这个问题？

Answer 1

您无需使用ng-selected选择您的选项, ng-model为您做到这一点.

这导致模型混淆.这就是为什么你必须选择它两次.

 <select name="specific_for_dealership" ng-model="news.specific_for_dealership">
        <option value="">All</option>
        <option ng-repeat="dealer in dealers"  value="{{ dealer.dealerid }}">{{ dealer.name }}</option>
 </select>

我个人推荐的其他东西是切换到ng-options来显示对象的选项列表.它将为您提供更多功能.例如,您可以将整个对象绑定到选择器而不仅仅是ID.

<select name="specific_for_dealership" 
     ng-options="dealer.dealerid as dealer.name for dealer in dealers" 
     ng-model="news.specific_for_dealership">
        <option value="">All</option>
</select>