无法获取Angular-xeditable可编辑-选择此项可在当前项绑定到嵌套JSON对象时将其选中

Question

当当前项绑定到嵌套的JSON对象时，我无法获取Angular-xeditable Editable-Select to Select当前项。Data all保存得很好，但它只是没有在Select框中显示当前选择的项目，这让我抓狂，因为我确信我遗漏了一些明显的东西。我在这里创建了一个JSFiddle：

http://jsfiddle.net/NfPcH/1031/

代码如下：

<span editable-select="data.organisation.OrganisationType"
              e-ng-options="type.Name for type in data.types">
            {{data.organisation.OrganisationType.Name}}
        </span>

以下是两个数据对象：

$scope.data.organisation =  {
"Id":1,
"Name":"My Organisation",
"OrganisationType":{"Id":2,"Name":"Internal"}
 } 

$scope.data.types = [
{"Id":1,"Name":"Client"},
{"Id":2,"Name":"Internal"},
{"Id":3,"Name":"Cold"}
] 

当我将它绑定到嵌套对象中的ID时，它可以很好地工作，但随后它只更改嵌套对象中的Id，然后我必须手动过滤和更改对象的名称部分，这是可行的，但我相信一定有更好的方法。

Answer 1

当项目被选择时，$data将使用所选项目的id进行加载。在进行选择后，您可以使用它来检索值。

<span editable-select="data.organisation.OrganisationType"
      e-ng-options="type.Name for type in data.types">
  {{ findTypeName($data) || data.organisation.OrganisationType.Name}}
</span>

然后，您可以在控制器中定义findTypeName

$scope.findTypeName = function(id) {
  var found = $scope.data.types.filter(function(t){
    return (t.Id === id);
  });
  return found.length ? found[0].Name : null;
};

Answer 2

诀窍在于使用select的ng-options上的对象(例如'obj as obj.title')，而不是对象的属性，这样当一个项目被选中时，它会将整个对象分配给模型，而不是属性。

这种方法的问题是，您不能只比较对象(因为比较一个对象总是比较它们的引用，而不是“内容”，因此obj1 == obj2永远不会为真，除非它们是完全相同的对象)，所以这里需要的另一个技巧是在ng- track by <some-id-property>上使用。因此，您的可编辑内容将如下所示：

 <span editable-select="data.organisation.OrganisationType"
        e-ng-options="type as type.Name for type in data.types track by type.Id">
        {{data.organisation.OrganisationType.Name}}
 </span>

请注意，在您的JSFiddle上使用的是非常旧的angular版本(不支持track by )，所以我使用1.2创建了一个新版本，这是支持track by的最旧的angular版本：

http://jsfiddle.net/NBhn4/170/