current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite
1

currently I have this JSON object:

 {
    "hospitalId" : "0002",
    "name" : "test form",
    "procedureId" : "0002-testform",
    "steps" : [ 
        {
            "title" : "Brand",
            "value" : [ 
                "jonson", 
                "smith", 
                "braun"
            ]
        }, 
        {
            "title" : "Procedure type",
            "value" : [ 
                "total", 
                "unicompartimental"
            ]
        }
    ]
}

And I need to display it on a multiselect, like this:

<strong>Brand</strong>
<ul>braun</ul>
<ul>jonson</ul>
<ul>smith</ul>

<strong>Procedure type</strong>
<ul>total</ul>
<ul>unicompartimental</ul>

They need to be ordered by steps.title and by steps.value, the thing is: I can't figure out how to display them correctly with a <select ng-options> tag, this is what I've tried:

<select multiple ng-model="step" ng-options="step[0].value  group by step.title for step in loadedSteps.steps " ></select>

Gives me: Brand undefined

<select multiple ng-model="step" ng-options="step.value  group by step.title for step in loadedSteps.steps | orderBy:['value']"></select>

Gives me: Brand [jonson, smith, braun]

Also I've tried with a nested <option> but it doesn't have ordering...

Any help would be very appreciated, thanks in advance

share|improve this question
up vote 0 down vote

Here is the answer you are looking for.

You should use two ng-repeat, first for displaying title and other for displaying values inside the title.

The first ng-repeat starts with the title and ends with the values in that title.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = 
 {
 "hospitalId": "0002",
 "name": "test form",
 "procedureId": "0002-testform",
 "steps": [{
  "title": "Brand",
  "value": [
   "jonson",
   "smith",
   "braun"
  ]
 }, {
  "title": "Procedure type",
  "value": [
   "total",
   "unicompartimental"
  ]
 }]

}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <div >
      <label>{{step.title}}</label>
    <select>
    <option ng-repeat-start="step in names.steps | orderBy:'title'" ng-bind="step.title"></option>
    <option ng-repeat-end ng-repeat="opt in step.value | orderBy:'step.value':true" ng-bind="' - ' + opt"></option>
    </select>
    
  </div>
</div>


</body>
</html>

Please run this snippet

HEre is a plunker

share|improve this answer
    
@Camilo, please check this answer. – Sravan Nov 9 at 5:31
    
Thank you mate, it worked just fine, I appreciate it! – Camilo Nov 10 at 4:01
    
you can accept my answer, if you don't mind. :) – Sravan Nov 10 at 5:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.