javascript - AngularJS-ngOptions

Question

我有一个使用经销商对象数组的选择。我可以显示经销商名称作为选项，但我还想显示距离。例如“经销商名称 - 12 英里”。

我的选择:

<select ng-show="dealers" ng-model="formData.dealer.dealerNumber"
ng-options="dealer.dealerNumber as dealer.name for dealer in dealers">
</select>

Answer 1

在 doc :

select as label for value in array

label: The result of this expression will be the label for <option> element. The expression will most likely refer to the value variable (e.g. value.propertyName).

angular.module('app', [])
  .controller('ctrl', ["$scope",
    function($scope) {
      $scope.dealers = [{
          dealerNumber: 1,
          name: 'd',
          distance: '123'
        }, {
          dealerNumber: 2,
          name: 'dd',
          distance: '124'
        }, {
          dealerNumber: 3,
          name: 'ddd',
          distance: '125'
        }, {
          dealerNumber: 4,
          name: 'dddd',
          distance: '126'
        }, {
          dealerNumber: 5,
          name: 'ddddd',
          distance: '127'
        }, {
          dealerNumber: 6,
          name: 'dddddd',
          distance: '128'
        }


      ];

    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-show="dealers" ng-model="dealerNumber" ng-options="dealer.dealerNumber as dealer.name+'-'+dealer.distance for dealer in dealers">
  </select>
</div>

更新:使用过滤器

angular.module('app', [])
  .controller('ctrl', ["$scope",
    function($scope) {
      $scope.dealers = [{
          dealerNumber: 1,
          name: 'd',
          distance: '123.5'
        }, {
          dealerNumber: 2,
          name: 'dd',
          distance: '124.6'
        }, {
          dealerNumber: 3,
          name: 'ddd',
          distance: '125'
        }, {
          dealerNumber: 4,
          name: 'dddd',
          distance: '126'
        }, {
          dealerNumber: 5,
          name: 'ddddd',
          distance: '127'
        }, {
          dealerNumber: 6,
          name: 'dddddd',
          distance: '128'
        }


      ];

    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-show="dealers" ng-model="dealerNumber" ng-options="dealer.dealerNumber as dealer.name+'-'+(dealer.distance|number:0) for dealer in dealers">
  </select>
</div>