javascript - Angular ng-options选择选项视觉反馈问题

Question

因此，我在获取正确的视觉反馈以及所需的数据绑定(bind)行为方面遇到了问题。这是我的代码:

<div ng-app="myTestApp" ng-controller="myTestCtrl">
    <!-- selected value is site.name -->
    <h3>Selected value is site.name property</h3>
    <select ng-model="testSelect" ng-options="site.name as site.name for site in sites track by site.name">
        <option value="">Please choose a site</option>
    </select>
    <div ng-bind="testSelect"></div>

    <hr/>
    <!-- Selected value is site object itself -->
    <h3>Selected value is the site object itself</h3>
    <select ng-model="testSelectTwo" ng-options="site.name for site in sites track by site.name">
        <option value="">Please choose a site</option>
    </select>
    <div ng-bind="testSelectTwo"></div>
</div>

这是附带的 Angular javascript:

var app = angular.module('myTestApp', []);

app.controller('myTestCtrl', ['$scope', function ($scope) {
    $scope.sites = [
        {id: 1, name: 'Site 1', link: 'http://url'},
        {id: 2, name: 'Site 2', link: 'http://url'},
        {id: 3, name: 'Site 3', link: 'http://url'}
    ];
}]);

这是上述所有内容的 jsFiddle:http://jsfiddle.net/aZwLY/

现在我想要的是为 ng-model 提供 site.name 属性供我使用(使用上面代码的 jsFiddle 示例的上半部分)，但我也想要实际选择更改的视觉反馈(底部jsFiddle 示例的一半)。

到目前为止我还没有想到解决方案。

Answer 1

删除您的track by子句。这就是导致问题的原因

跟踪依据是当您可能有不同的对象应该被平等对待时。要使用您的第二个示例，如果我执行以下操作:

$scope.site = {id: 1, 名称: "站点 3", 链接: ""};

这将使 id 为 3 的站点被选中。这是因为我们通过名称进行跟踪。

fiddle :http://jsfiddle.net/n7U6V/