Button bar used to show dynamic list


#1

How can I set the first button bar tab to selected. right now I have it triggered to display corresponding item list and changed to active state using ng-click. Is there way to use ng-init to set first index item of bar button? The bar button items were created using ng-repeat

Here is my codepen http://codepen.io/kmartinezmedia/pen/JpABC?editors=101


#2

Hmm, right away it’s going to be a bit tough because of how you have you’re data structured. Right now, there is no hierarchy to your data, everything is at the same level.

A quick example would be something like this


[{
  "Housing": [
    {
      "id": 0,
      "title":"Homeless",
      "content": []      
    },
    {
      "id": 1,
      "title":"Runaway",
      "content": []
    },
    {
      "id": 2,
      "title":"Other Situations",
      "content": []
    }
    ]
},
{
  "Educational Opportunities": [
    {
      "id": 0,
      "title":"Degrees",
      "content": []      
    },
    {
      "id": 1,
      "title":"Certifications",
      "content": []
    }
    ]
}]

From there you can use ng-init to set the active tab


#3

how do you loop through each object without having a property to reference in html. I may be wording that wrong, but I just don’t know the technical way. I’m used to be able to do ng-repeat= “resource in resources” and then somewhere in HTML referencing a {{resource.name}} for example. But im just confused how I can access the top level names like Housing and then reference its array of child objects. like {{resource.title}} to print Homeless


#4

Hey Mike,

I reformatted my data to look like this:
.factory(‘Resources’, function() {
// Might use a resource here that returns a JSON array

// Some fake testing data
var resources=
[{
“Housing”: [
{
“id”:1,
“name”:“Homeless”,
“description”:"",
“image”:1,
“category” : [“Couch Surfing”,“Living on the Streets”]
},
{
“id”:2,
“name”:“Runaway”,
“description”:"",
“image”:2
},
{
“id”:3,
“name”:“Other Situations”,
“description”:"",
“image”:3,
“category” : [“Couch Surfing”,“Living on the Streets”,“Independent residence”,“Residing with natural, adoptive, or foster family”,“Other family situations (e.g., girlfriend’s family, extended family)”, “Semi-independent living (e.g., service coordinator assists but does not live on site)”,“Supported living (e.g., supervised apartment with a live in mentor or on site support staff at apartment complex)”,“Group home or boarding home”,“Restrictive setting (e.g., crisis unit, residential treatment center, detention center)”]
}
]
},
{
“Personal Effectiveness”: [
{
“id”:0,
“name”:“Interpersonal Relationships”,
“description”:"",
“image”:"",
“category” : [“Relationship development and maintenance of friendships,Balance of independence and interdependence with family members”,“Dating skills and development/maintenance of intimate relationships”,“Maintenance of relationships with mentors and informal key players”]
},
{
“id”:1,
“name”:“Self-Determination”,
“description”:"",
“image”:"",
“category”: [“Social problem solving (e.g., generate alternative options, make informed decisions)”,“Set goals and develop plans for achieving goals”,“Evaluate one’s progress in achieving goals”,“Accept one’s strengths and limitations”,“Advocate for one’s rights and positions”,“Develop one’s creativity”,“Right to fail”]
},
{
“id”:2,
“name”:“Communication”,
“description”:"",
“image”:"",
“category”:[“Express one’s ideas and feelings through speaking and listening”,“Reading and writing skills for learning, fun and communication”,“Knowledge of information sources (e.g., use of library, authorities, internet communications, and other resources)”,“Study and learning skills for gaining and applying new information”,“Cyberspace safety (e.g., revealing personal information, meeting contacts in person, use of credit cards online)”]
},
{
“id”:3,
“name”:“Parenting”,
“description”:"",
“image”:"",
“category”: [“Health of mother for the prenatal fetus (e.g., balanced diet, physical activity, adequate sleep, no smoking)”,“Recognizing when to see a physician for prenatal and postnatal care”,“Young adult male supports girlfriend/spouse in promoting the health of the mother and baby”,“Young adult male and female assuming responsibility for rearing the children (e.g., care and discipline, behavioral parenting practices, providing home setting, finances)”]
}
]
},
{
“Health & Safety” :[
{
“id”:“0”,
“name”:“Emotional & Behavioral Wellbeing”,
“description”:"",
“image”:"",
“category” :[“Create reciprocal relationships with others”,“Expression of care and concern for others”,“Social skills (e.g., positive feedback to others, acceptance of negative feedback, self-monitoring, self-evaluation)”,“Assertiveness skills and conflict resolution skills”,“Coping with stress and the ability to relax”,“Management of anger and moods”,“Spiritual wellbeing”,“Self-management of psychotropic medications and side effects”,“Manage use of alcohol and drugs”,“Avoid physical confrontations and criminal activities”,“Avoid danger to self and others”]
},
{
“id”:“1”,
“name”:“Physical Health & Wellbeing”,
“description”:"",
“image”:"",
“category” :[“Healthcare and fitness (e.g., balanced diet, physical activity)”,“Self-management of over-the-counter and prescription medications and possible side effects”,“Knowledge of sexual functioning and birth control (e.g., prevention of sexually transmitted diseases and unwanted pregnancies)”,“Ability to access medical and dental services”]
}
]
},

{
“Educational Opportunities” : [
{
“id”:0,
“name”:“Degrees”,
“description”:"",
“image”:"",
“cateogry”: [“Bachelor’s degree or beyond”,“Associate’s degree”]
},
{
“id”:1,
“name”:“Certifications”,
“description”:"",
“image”:"",
“category”: [“Vocational or technical certification”,“High school completion or GED certification”]
},
{
“id”:2,
“name”:“Other”,
“description”:"",
“image”:""
}
]
},

{
“Employment & Career” : [
{
“id”:0,
“name”:“Competative”,
“description”:"",
“image”:"",
“category” : “Work experience, paid or unpaid, at competitive or entrepreneurial worksite (e.g., apprenticeship with employee serving as coworker mentor)”
},
{
“id”:1,
“name”:“Supported”,
“description”:"",
“image”:""
},
{
“id”:2,
“name”:“Transitional”,
“description”:"",
“image”:""
}
]
},

{
“Community-Life Functioning” :[
{
“id”:0,
“name”:“Daily Living”,
“description”:"",
“image”:"",
“category” : [“Self-care”,“Maintenance of living space and personal possessions”,“Money management”,“Cooking and nutrition”,“Maintenance and security of personal and financial documents”]
},
{
“id”:1,
“name”:“Community Participation”,
“description”:"",
“image”:"",
“category”: [“Safety skills (e.g., avoid dangerous situations, prevent victimization”,“Mobility around the community”,“Access and use of relevant community agencies and resources”,“Citizenship responsibilities, knowledge of basic rights and responsibilities”,“Community social support (e.g., peer groups, community organizations)”,“Access to legal services”,“Cultural and spiritual resources”]
}
]
},

{
“Leisure Activities” : [
{
“id”:0,
“name”:“Hobbies”,
“description”:"",
“image”:"",
“category”: “Entertaining one’s self”
},
{
“id”:1,
“name”:“Volunteering”,
“description”:"",
“image”:""
},
{
“id”:2,
“name”:“Places”,
“description”:"",
“image”:"",
“category” : [“Activities with others”, “Creating indoor and outdoor activities of interest and fun”]
},
{
“id”:3,
“name”:“Healthy”,
“description”:"",
“image”:""
}
]
}
]

return {
all: function() {
return resources;
},
get: function(resourceId) {
// Simple index lookup
return resources[resourceId];
}
}

});

How do I use ng-repeat to display just the top layer objects and then subsequently drill down into them? Any help is much appreciated!


#5

So you would do something like this.

ng-repeat="group in groups"
ng-repeat="catagory in group.catagoiries"
ng-repeat="name in catagory.names"

You can actually just start climbing down the json tree like this