Angular.js получает список ng-параметров из предыдущего выбора ng-options в объекте объектов

Question

Angular.js получает список ng-параметров из предыдущего выбора ng-options в объекте объектов

0

У меня есть объект:

object: {
    "id":"1",
    "name":"name1",
    "number":"number1",
    ...,
    "subObject":[{
        "id":"1",
        "name":"subName1"},
        {
        "id":"2",
        "name":"subName2"}
    ]};

Я использую ng-options для выбора значения object.name, но имею отдельные опции ng, где я хочу видеть только список имен "subObject", связанных с указанным значением object.name. Этот объект [объект], очевидно, более сложный, чем приведенный выше пример, но это суть структуры.

В настоящее время для получения значения значения object.name у меня есть:

<label>Object Name</label>
<select ng-options="object.name as object.name for object in Parent.objects track by object.name" ng-model="mainName" ng-value="Parent.thisState.objects.name"></select>

Можно ли получить список списков имен subObject, когда вы сначала выбираете имя объекта, а не весь объект?

brettwbyron 18 май 2016, в 16:00

Источник

Теги:

javascript

angularjs

object

nested

ng-options

2 ответа

Ещё вопросы

Jose Rocha · Answer 1 · 2016-05-18T12-26-00.000Z

Достигнуть намеченного результата можно по-разному.

Следующий пример - это возможное решение, при котором при выборе объекта из первого выбора мы даем их непосредственно переменной $ scope, которая будет использоваться вторым выбором.

наценка

<body ng-app="myApp" ng-controller="myController">
    <select ng-model="selectedFromList" 
    ng-options="object.subitems as object.name for object in list track by object.id"></select>
    <select ng-model="selectedFromSubList"
    ng-options="subitems as subitems.name for subitems in selectedFromList"></select>
 </body>

В первом выборе мы говорим, что хотим отобразить имя объекта as object.name а управляемый объект будет object.subitems который будет сохранен в ng-модели ng-model="selectedFromList" Во втором select мы просто итерация по объекту в selectedFromList subitems.name и отображение subitems.name.

Рабочий плунжер

редактировать

Для проблемы, которую вы описали как комментарий, я буду стараться использовать фильтр, поэтому имя может преобладать на ng-модели первого выбора. Я предполагаю, что имя уникально, поскольку это имя, которое вы хотите отправить в "API".

Код фильтра

.filter('mapArray', function() {
  return function(array, name) {  
    if (!angular.isArray(array)) return array;
    var filter = array.filter(function(value){return value.name === name.name;})[0];
    if (filter === undefined) return [];
    return filter.subitems;
  }
})

наценка

<body ng-app="myApp" ng-controller="myController">
    <select ng-model="selectedFromList" 
    ng-options="object.name as object.name for object in list"></select>
    <select ng-model="selectedFromSubList"
    ng-options="subitems as subitems.name for subitems in 
(list |  mapArray:{name :selectedFromList})"></select>
  </body>

Рабочий плунжер

Та же самая проблема найдена здесь. Значение первого выбора, отправляемое в API, должно быть значением object.name. Таким образом, хотя значения object.name показываются, когда вы используете object.subitems as object.name значение, которое отправляется в API, является object.subitems а не object.name .
Я ценю помощь. Я решил, что буду держать абстрагированный код и создаю сервисную функцию для получения первых объектов, а также сервисную функцию для получения идентификатора каждого подобъекта в каждом родительском объекте. Выглядело это примерно так: self.getObjects = function() { MyService.getObjects() .then(function(results) { self.objects = results.objects; }); self.getSubObjectsByObjectId = function(objects, id) { objects.forEach(function(obj) { if (obj.id === id) { self.sub = obj.sub; } }); };
forEach() - это написанная мной функция, которая находится в папке библиотеки, которую я использую во всех своих приложениях.

Lokesh · Answer 2 · 2016-05-18T11-59-00.000Z

Давайте рассмотрим, что это ваш основной объект, содержащий вспомогательные объекты.

$scope.objects = [{
  id: 1,
  name: 'object one',
  subitems: [{
    id: 1,
    name: 'subitem one of obj 1'
  }, {
    id: 2,
    name: 'subitem two of obj 1'
  }, {
    id: 3,
    name: 'subitem three of obj 1'
  }]
}, {
  id: 2,
  name: 'object two',
  subitems: [{
    id: 1,
    name: 'subitem one of obj 2'
  }, {
    id: 2,
    name: 'subitem two of obj 2'
  }, {
    id: 3,
    name: 'subitem three of obj 2'
  }]
}, {
  id: 3,
  name: 'object three',
  subitems: [{
    id: 1,
    name: 'subitem one of obj 3'
  }, {
    id: 2,
    name: 'subitem two of obj 3'
  }, {
    id: 3,
    name: 'subitem three of obj 3'
  }]
}];

и это будет ваш html,

  <select ng-model="s1" ng-options="obj as obj.name for obj in objects"></select>

<select ng-model="s2" ng-options="subobj.name as subobj.name for subobj in s1.subitems" ng-disabled="!s1"></select>

по умолчанию поле выбора subObjects будет отключено (поскольку оно не имеет родительского значения). как только вы выберете значение в поле выбора mainObject, второе поле, заполненное родителями, выбранными subObjects

К сожалению, это вернет первое значение как весь объект, а не только имя. Требуемое значение - это только имя объекта. Это оставляет подпункты как неопределенные.