Не удается получить Angular-xeditable Editable-Select для выбора текущего элемента, когда он привязан к вложенному объекту JSON

Я не могу заставить Angular-xeditable Editable-Select выбрать текущий элемент, когда он привязан к вложенному объекту JSON. Все данные сохраняются нормально, но он просто не отображает текущий выбранный элемент в поле «Выбор», что сводит меня с ума, так как я уверен, что упускаю что-то очевидное. Я создал 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>

Это 2 объекта данных:

$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"}
]

Он отлично работает, когда я привязываю его к идентификатору внутри вложенного объекта, но затем он изменяет только идентификатор в моем вложенном объекте, и затем мне приходится вручную фильтровать и изменять часть имени объекта, которая работает, но я уверен должен быть лучший способ.


angularjs x-editable
person Holland Risley    schedule 16.03.2014    source источник
comment
Попробуйте ng-options=type.id как type.name для типа в data.types?   -  person Todd Baur    schedule 08.09.2014
comment
Попробуйте ng-options=type.Id как type.Name для типа в data.types   -  person ReggieB    schedule 24.09.2014

Ответы (2)


arrow_upward
1
arrow_downward

Когда элемент выбран, $data загружается с идентификатором выбранного элемента. Вы можете использовать это для получения значения после того, как выбор сделан.

<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;
};
person ReggieB    schedule 24.09.2014

arrow_upward
1
arrow_downward

Хитрость заключается в использовании объекта в ng-options выбора (например, 'obj as obj.title'), а не свойства объекта, так что, когда элемент выбран, он назначит весь объект модели, а не свойству.

Проблема с этим подходом заключается в том, что вы не можете просто сравнивать объекты (поскольку при сравнении объекта всегда сравнивается их ссылка, а не «содержимое», так что obj1 == obj2 никогда не будет истинным, если только они не являются одним и тем же объектом), поэтому другой трюк здесь необходимо использовать track by <some-id-property> в ng-options. Таким образом, ваш редактируемый объект будет выглядеть так:

 <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 (где отслеживание не поддерживается), поэтому я создал новую, используя 1.2, которая является самой старой версией angular, поддерживающей отслеживание:

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

person andzep    schedule 21.04.2016