Опции Ng в Angular для массивов и объектов

Question

Прежде всего 2 рабочих решения:

Пример 1 - Массив в контроллере

$scope.s1 = [
    {
        "name": "Item1",
        "id": 1
    },
    {
        "name": "Item2",
        "id": 2
    }
];

Вид 1

<select ng-model="select1" ng-options="foo.id as foo.name for foo in s1">
    <option value="">Select a Value</option>
</select>

Пример 2 - Объект в контроллере

Та же концепция может помочь вам и здесь, если вы знаете название "myS2":

$scope.s2 = {

    "myS2": [
        {
            "name"  : "Item1",
            "id"    : 1
        },
        {
            "name": "Item2",
            "id": 2
        }
    ]
};

Вид 2

 <select ng-model="select2" ng-options="foo.id as foo.name for foo in s2.myS2">
        <option value="">Select a Value</option>
 </select>

Теперь вопрос:

$ scope.s2 имеет дополнительные объекты {myS1:[..] to mySn:[..]} с разными именами, и я хочу использовать их в качестве имени группы параметров? Как я могу сделать это в ng-options?

Answer 1

Я не думаю, что вы можете вкладывать циклы в ng-repeat, но, добавив лишь немного бизнес-логики на свой контроллер, вы можете получить то, что хотите!

Надеюсь, поможет:)

(function(window, angular) {

  
  function TestCtrl(vm, data) {
    var options = [];
    
    for(var group in data) {
      if(!data.hasOwnProperty(group)) { continue; }
      
      for(var i = 0, len = data[group].length; i < len; i++) {
        var item = data[group][i];
        
        item.group = group;
        
        options.push(item);
      }
    }
    
    vm.options = options;
    
    vm.current = options[0];
  }
  
  angular
    .module('test', [])
    .value('S2', {
      "myS2": [
        {
          "name"  : "Item1 mys2",
          "id"    : 1
        },
        {
          "name": "Item2 mys2",
          "id": 2
        }
      ],
      "myS3": [
        {
          "name"  : "Item1 mys3",
          "id"    : 1
        },
        {
          "name": "Item2 mys3",
          "id": 2
        }
      ]
    })
    .controller('TestCtrl', ['$scope', 'S2', TestCtrl])
  ;
})(window, window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <article ng-controller="TestCtrl">
    
    <select ng-model="current" ng-options="item as item.name group by item.group for item in options">
    </select>
  </article>
</section>