javascript - 为什么angular-xeditable在第一次运行时不会突出显示当前值？

我使用带有下拉菜单的angular-xeditable进行就地编辑（jsFiddle）。奇怪的是，在页面加载后立即单击xeditable链接时，我没有看到当前值突出显示为选定的值。为什么会这样？

的HTML

Person: <a href="#" editable-select="user.name"
 buttons="no"
 e-ng-options="p as personDetails.text for (p, personDetails) in people">
 {{people[user.name].text}} </a>
Status: <a href="#" editable-select="user.status"
 buttons="no"
 e-ng-options="s as statusDetails.text for (s, statusDetails) in statuses">
 {{statuses[user.status].text}}
</a>

Java脚本

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter) {
  $scope.user = {
    status: 2,
    name: 2
  };

    $scope.statuses = {
      '1': { text: 'status1'},
      '2':{ text: 'status2'},
      '3':{ text: 'status3'},
      '4':{ text: 'status4'}
      };
  $scope.people = {
      '1': { text: 'p1'},
      '2':{ text: 'p2'},
      '3':{ text: 'p3'},
      '4':{ text: 'p4'}
      };
});

最佳答案

我不喜欢我选择的属性的名称，但是我更喜欢使用数组，如果使用对象，这个问题可以解决：

<div ng-app="app" ng-controller="Ctrl">
    Person: <a href="#"
    editable-select="user.person"
    buttons="no"
    e-ng-options="p.text for p in people track by p.value"> {{user.person.text}} </a>
</div>

app.controller('Ctrl', function($scope, $filter) {
    $scope.people = [
       { value: '1', text: 'p1' },
       { value: '2', text: 'p2' },
       { value: '3', text: 'p3' },
       { value: '4', text: 'p4' }
    ];

    $scope.user = {person: $filter('filter')($scope.people, {value : 3})[0]};
});

同样，它也不能与您所引用的AngularJS版本一起使用，here是一个有效的提琴。