角ng-选项选择选项视觉反馈问题

Question

因此，我在获得适当的视觉反馈以及我想要的数据绑定行为方面遇到了问题。这是我的密码：

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

下面是附带的角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模型获得site.name属性以供我使用(使用上述代码的jsFiddle示例的上半部分)，但我也希望看到实际选择更改的视觉反馈( jsFiddle示例的下半部分)。

到目前为止，我还没有想出一个解决办法。

Answer 1

删除track by子句。这就是造成问题的原因。

Track by是指您可能有不同的对象，它们应该被平等对待。若要使用第二个示例，请执行以下操作：

$scope.site = {id: 1, name: "Site 3", link: ""};

它将使网站的id为3的选择。这是因为我们在用名字追踪。

小提琴：http://jsfiddle.net/n7U6V/