Bind ng-options для вложенного массива в объекте JSON, внутри ng-repeat

Question

Это мой первый вопрос, поэтому, пожалуйста, будьте осторожны! Я надеюсь, что вы можете помочь.

Я пытаюсь определить окно выбора (раскрывающегося списка) в моем представлении HTML, используя ng-repeat, чтобы я мог создать выбор для каждого элемента в массиве. Я успешно достиг этого, но мои проблемы возникают, когда я пытаюсь получить нужные мне параметры в каждом из них.

Массива Я использую { "field1": 1, "field2": "Value01", "field3": "Value02", "refFields": [ { "fieldId": 100, "fieldValue": "fieldValueA" }, { "fieldId": 101, "fieldValue": "fieldValueB" } ] }, etc...

мне нужно выбрать за единицу в «верхнем уровне» массив, и в каждом окне выбора значение, которые должны появиться должно быть в fieldValue от refFields вложенного массива.

Мой текущий (сломанный) код продукта некоторые довольно мусорные результаты. Вот код:

<div ng-repeat="fk in fks"> 
     <ng-form name="fksForm"> 
      <select name="fkselect" ng-model="fk" ng-options="item as item.refFields for item in fks">     
      </select> 
     </ng-form> 
    </div> 

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

ng-options="item as item.refFields.fieldValue for item in fks" 

Вот мой JSFiddle: ng-option nested JSON Array within ng-repeat

Большое спасибо заранее за любые предложения!

Answer 1

С Underscore.js Вы можете подготовить свои данные для ng-опций.

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

Я создал два массива с именами полей, которые используются для ng-repeat, а второй массив содержит refFields для параметров.

С $index вы можете получить текущий индекс ng-repeat для доступа к refFields.

Я не уверен, правильно ли я создал это, потому что не знаю, что вы делаете с значениями field1, field2, field3.

Пожалуйста, взгляните на это jsfiddle или демонстрационную версию ниже (этот же код).

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('DetailsCtrl', ['$scope', function($scope) { 
 
    var data = [ 
 
    { 
 
    "field1": 1, 
 
    "field2": "Value01", 
 
    "field3": "Value02", 
 
    "refFields": [ 
 
     { 
 
     "fieldId": 100, 
 
     "fieldValue": "fieldValueA" 
 
     }, 
 
     { 
 
     "fieldId": 101, 
 
     "fieldValue": "fieldValueB" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "field1": 2, 
 
    "field2": "Value03", 
 
    "field3": "Value04", 
 
    "refFields": [ 
 
     { 
 
     "fieldId": 102, 
 
     "fieldValue": "fieldValueA" 
 
     }, 
 
     { 
 
     "fieldId": 103, 
 
     "fieldValue": "fieldValueB" 
 
     }, 
 
     { 
 
     "fieldId": 104, 
 
     "fieldValue": "fieldValueC" 
 
     }, 
 
     { 
 
     "fieldId": 105, 
 
     "fieldValue": "fieldValueD" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "field1": 3, 
 
    "field2": "Value05", 
 
    "field3": "Value06", 
 
    "refFields": [ 
 
     { 
 
     "fieldId": 106, 
 
     "fieldValue": "fieldValueA" 
 
     }, 
 
     { 
 
     "fieldId": 107, 
 
     "fieldValue": "fieldValueB" 
 
     } 
 
    ] 
 
    } 
 
]; 
 
    $scope.fks = _.map(data, function(field) { 
 
     return _.omit(field, ['field1', 'field2', 'field3']).refFields; // only refFields 
 
    }); 
 
    console.log($scope.fks); 
 
    $scope.fields = _.map(data, 
 
    function(field) { 
 
     console.log(field); 
 
     return [field.field1, field.field2, field.field3]; 
 
    } 
 
    ); 
 
    //console.log(results) 
 
    $scope.dropdown = {}; 
 
    
 
    $scope.changedValue = function(index) { 
 
     console.log(index, $scope.dropdown); 
 
     console.log($scope.dropdown[index]); 
 
    } 
 
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="DetailsCtrl"> 
 
<form novalidate class="form-vertical" ng-show="!loading" name="detailsForm" ng-controller="DetailsCtrl"> 
 
    <!--<pre>{{fks |json}}</pre>--> 
 
     <div ng-repeat="fk in fields"> 
 
      <ng-form name="fksForm"> 
 
       <label>{{fk}}</label> 
 
       <select name="fkselect" ng-model="dropdown[$index]" ng-options="item.fieldValue for item in fks[$index]" ng-change="changedValue($index)"> 
 
       </select> 
 
      </ng-form> 
 
     </div> 
 
</form> 
 
</div>

Answer 2

Ваши данные хорошо, и есть более простой способ: использовать этот fk и получить refFields непосредственно от этого, так ng-options="item as item.fieldValue for item in fk.refFields".

Полный код:

<div ng-app="myApp" ng-controller="myCtrl"> 
    <div ng-repeat="fk in fks"> 
     <label>{{fk.field2}}</label> 
     <select ng-model="fk.selectedItem" ng-options="item as item.fieldValue for item in fk.refFields">    
     </select>  
    </div> 
</div> 

И данные, которые вы можете просто ссылаться непосредственно:

angular.module('myApp',[]) 
.controller('myCtrl',function($scope,$timeout) { 
    $scope.fks = [ 
     { 
     "field1": 1, 
     "field2": "Value01", 
     "field3": "Value02", 
     "refFields": [ 
      { "fieldId": 100, "fieldValue": "1fieldValueA" }, 
      { "fieldId": 101, "fieldValue": "1fieldValueB" } 
     ] 
     }, 
     { 
     "field1": 2, 
     "field2": "Value03", 
     "field3": "Value04", 
     "refFields": [ 
      { "fieldId": 102, "fieldValue": "2fieldValueA" }, 
      { "fieldId": 103, "fieldValue": "2fieldValueB" }, 
      { "fieldId": 104, "fieldValue": "2fieldValueC" }, 
      { "fieldId": 105, "fieldValue": "2fieldValueD" } 
     ] 
     }, 
     { 
     "field1": 3, 
     "field2": "Value05", 
     "field3": "Value06", 
     "refFields": [ 
      { "fieldId": 106, "fieldValue": "3fieldValueA" }, 
      { "fieldId": 107, "fieldValue": "3fieldValueB" } 
     ] 
     } 
    ]; 
}); 

И, конечно же, the fiddle.

Теперь просто не спрашивайте меня, как инициализировать выбор определенного элемента в таких списках: вот что я здесь искал.