Here is my HTML code
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="showData($index)" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-repeat="field in Data" >
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>
I want to show the col-md-8 div data based on index selected from the field.name from col-md-4 list group.
Here is my Sample Data
{
"scenarios": [{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
}],
"description": "",
"name": "Some name "
}
The name is displayed on the left (in col-md-4)and the corresponding data has to be shown on the right(in col-md-8).
But I can't figure out how to do it. Any help ?
declare a scope varible to store selected index, depend on selected index show other div,
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-show="selectedIndex == $index" ng-repeat="field in Data">
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>
If you only are going to display one field object, I would just do the following:
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item"
ng-click="selectedField = field"
ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<!-- only if one is selected -->
<div ng-if="selectedField">
<div class="panel panel-primary"
<!-- get data from 'selectedField' -->
ng-repeat="scenario in selectedField.scenarios track by $index">
<!-- other stuff -->
</div>
</div>
</div>
Related
I have written an API which consumes this JSON
{
"savedBy": "1",
"symptom": "new",
"questionSet": [{
"question": "This is question 1",
"options": [{
"values": "okasdsad"
},
{
"values": "asdsad",
"subQuestionSet": [{
"question": "This is question 1",
"options": [{
"values": "okasdsad"
},
{
"values": "oaskdosakdo"
},
{
"values": "yoyoyo"
},
{
"values": "nonono"
}
]
}]
},
{
"values": "yoyoyo"
},
{
"values": "nonono"
}
]
}]
}
Now I have written the front-end in angular so that I can send this JSON value by the form,
HTML.
<div class="question" ng-repeat="qItem in questionVo track by $index">
{{questionVo}}
<div class="col-md-12">QUS {{$index+1}}
<input type="text" ng-model="qItem.question" class="form-control" id=""></div>
{{question}}
<div class="form-inline col-md-10 col-md-offset-2">
<div class="form-group" ng-repeat="items in optionsVo track by $index">
{{optionsVo}}
<label>{{$index+1}}</label><input ng-model="items.values" type="text" class="form-control" id="">
<i class="fa fa-plus-square" ng-click="addoptionsVo(items)"></i>
<i class="fa fa-minus-square" ng-click="optionsVo.splice($index, 1)"></i>
<button class="btn btn-primary" ng-click="showSubset()">Add Subset</button>
<!--------subset ----->
<div class="question" ng-if="showSubsetView == true" ng-repeat="SubqItem in ssss track by $index">
<div class="col-md-12">QUS {{$index+1}}
<input type="text" ng-model="question" class="form-control" id=""></div>
<div class="form-inline col-md-10 col-md-offset-2">
{{itemsz.ssss}}
<div class="form-group" data-ng-repeat="Subitems in optionsVo track by $index">
<label>{{$index+1}}</label><input type="text" class="form-control" id="">
<i class="fa fa-plus-square" ng-click="addoptionsVo($index)"></i>
<i class="fa fa-minus-square" ng-click="optionsVo.splice($index, 1)"></i>
<button class="btn btn-primary">Add Subset</button>
</div>
<div class="clearfix"></div>
<div class="btn-margin"><button class="btn btn-primary">Add More</button></div>
</div>
<div class="clearfix"></div>
</div>
<!--------subset ----->
</div>
<div class="clearfix"></div>
<div class="btn-margin"><button class="btn btn-primary">Add More</button></div>
</div>
<div class="clearfix"></div>
</div>
Angular JS
$scope.questionVo = [{
question: '',
}];
$scope.addquestionVo = function($event) {
$scope.questionVo.push({
question: '',
});
};
$scope.optionsVo = [{}];
$scope.addoptionsVo = function($event) {
$scope.optionsVo.push({});
};
PROBLEM
1.)when i add second question in the array the options remain same like in the 1st question
2.) i want to make json same as the api json in the question through angular
also
"options": [{
"values": "okasdsad"
},
"subQuestionSet": [{
"question": "This is question 1",
"options": [{
"values": "okasdsad"
},
{
"values": "oaskdosakdo"
},
{
"values": "yoyoyo"
},
{
"values": "nonono"
}
]
}] {
"values": "okasdsad"
}
]
can anyone help me with this?
anyone>?
PLUNKER https://plnkr.co/edit/33mVEQ?p=preview
EDIT : i found strange issue with plunker / in chrome it is giving {[ "values": "asdsa"]] but in plunker it is becoming [{ "values": "asdsa" }]
Find the below approach that matches your requirement. The options should be inside the question array.
'use strict';
var app = angular.module('medparser',[]);
app.controller('addquestionController', function($scope, $http, $window, $rootScope, $timeout) {
$scope.addoptionsVo = function(no) {
$scope.questionVo[no].options.push({
values: ''
});
};
$scope.questionVo = [{
question: '',
options: [{
"values": ""
}]
}];
$scope.addquestionVo = function($event) {
console.log("ASDSA");
$scope.questionVo.push({
question: '',
options: [{
"values": ""
}]
});
};
//////////////////////////////////////////////
$scope.showSubsetView = false;
$scope.showSubset = function() {
$scope.showSubsetView = true;
};
});
////////////////////////////////////////
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="medparser" ng-controller="addquestionController">
<div class="intro-header">
<div style="height:1px"></div>
<nav class="navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index1.html">
<div class="logo">
<img src="images/logo.png"></div>
</a>
</div>
<div class="header-text">
Questionnaire For Doctors
</div>
</div>
</nav>
</div>
<div class="container header-padding">
<div class="col-md-6">Symptoms</div><br>
<div class="col-md-6"><input type="text" ng-model="keyword" class="form-control" ng-keyup="searchsymptoms(keyword)" typeahead="state.name for state in symptomsList | filter:$viewValue | limitTo:8" id=""></div>
<div class="clearfix"></div>
question : {{questionVo}}
<div class="question" ng-repeat="qItem in questionVo track by $index">
<div class="col-md-12">QUS {{$index+1}}
<input type="text" ng-model="qItem.question" class="form-control" id=""></div>
{{question}}
<div class="form-inline col-md-10 col-md-offset-2">
<div class="form-group" ng-repeat="items in qItem.options track by $index">
<label>{{$index+1}}</label><input ng-model="items.values" type="text" class="form-control" id="">
<i class="fa fa-plus-square" ng-click="addoptionsVo(items)"></i>
<i class="fa fa-minus-square" ng-click="optionsVo.splice($index, 1)"></i>
</div>
<div class="clearfix"></div>
<div class="btn-margin"><button class="btn btn-primary" ng-click="addoptionsVo($index)">Add Option</button></div>
</div>
<div class="clearfix"></div>
</div>
<div class="pull-left header-padding"><button class="btn btn-primary" ng-click="addquestionVo($event)">Add Question</button></div>
<div class="pull-right header-padding"><button class="btn btn-primary">Save</button></div>
</div>
</body>
I am working on angular and bootstrap application.
Please find the demo here
I have the below two requirements:
I have a dropdown list, by default option1 is selected, i want to
pass the id of the option selected to the tab controller(tabsctrl).
When user click on Tab1, tab1 data should be viewed and when user
click on Tab2, tab2 data should be viewed.
js code:
var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {
$rootScope.tabName ='MyTab Name';
$rootScope.selectedDropDownValue="dummy";
alert("selected dropdown value : " + $rootScope.selectedDropDownValue);
$rootScope.tabValue="tab1Value";
$scope.applicationData = {};
$scope.activeModule = "Tab1";
$scope.programModules=[{"tabName":"Tab1","tabValue":"tab1Value"},{"tabName":"Tab2","tabValue":"tab2Value"}];
$scope.loadApplicationData = function(tabVal,tabName){
$rootScope.tabName =tabName;
alert("$rootScope.tabName :: "+$rootScope.tabName);
$rootScope.tabValue=tabVal;
$scope.activeModule = tabVal;
};
$scope.loadApplicationData($scope.activeModule,'Tab1');
});
myApp.controller('dropDownListCtrl',function Ctrl($rootScope,$scope) {
$scope.list_categories = {
data: [{
id: 'id1',
name: 'option1'
}, {
id: 'id2',
name: 'option2'
}]
};
$scope.list_category = 'id1';
});
html code:
<div ng-controller="dropDownListCtrl">
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">
</select>
<p>$scope.list_category: {{list_category}}<p>
</div>
<br><br>
<div ng-controller="tabsctrl">
<div class="top-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" >
<li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
<a href="javascript:void(0)" ng-click="loadApplicationData(pg.tabValue,pg.tabName)" >{{pg.tabName}}</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
Tab1 data
</div>asdsa
</div>
</div><div></div>
<div role="tabpanel" class="tab-pane active" id="tab2">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
Tab2 data
</div>asdsa
</div>
</div><div></div> </div>
</div>
Any suggestions would be helpful.
I have an ng-repeat inside another one and I am trying to find out the parents index.
Because it is being ordered after the fact, I can't do the typical
ng-repeat="(step_index, step) in flow"
Does anyone know why this would be happening?
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parent.$index }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
You can use ng-init="$parentIndex = $index" on your parent <li>, then call $parentIndex in the child ng-repeat
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'" ng-init="$parentIndex = $index">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parentIndex }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng- repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-show="selectedIndex == $index" ng-repeat="field in Data">
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
</div>
</div>
I need to select the field.name in href to display the corresponding selected field as a block in same page. But it is always redirecting to # and there is no data to display.
Please advice is it possible to display the value for the selected field in same page.
Am cycling through an array inside of an array of objects as:
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="Features.value in oe.oeBenefits.Features">{{ Features.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
</div>
My JSON code returns the following, but getting that value just isn't happening despite changes. Here is the JSON returned:
"oeBenefits": [
{
"planId": "l0t3AlfKV%2fETUaQd0zZJGA%3d%3d",
"benefitTypeId": 1,
"benefitName": "Health Care FSA",
"isHsaAvailable": false,
"benefitMin": 0,
"benefitMax": 3510,
"numberOfContributions": 12,
"carryoverAmount": null,
"isDebitCard": true,
"is100percent": true,
"isGracePeriod": true,
"allowDirectDeposit": true,
"claimsRunout": 90,
"employerSeed": "Your employer will contribute additional funds to your benefit",
"learnMoreUrl": "http://www.naviabenefits.com/participants/benefits/health-care-fsa/",
"Features": [
{
"key": "0",
"value": "Navia Benefits Card"
},
{
"key": "2",
"value": "FlexConnect"
},
{
"key": "4",
"value": "Online claim submission"
},
{
"key": "5",
"value": "Online card swipe substantiation"
}
]
},
All the other repeated data from the object(s0 return just fine, just this features part where I want just the value, not the key.
this should resolve your problem for you
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
The problem is with your inner loop you are not using the correct array object
You should do <li ng-repeat="Features in oe.oeBenefits.Features">{{ Features.value }}</li> instead of <li ng-repeat="Features.value
you have a nested ng-repeat, so in your case your ng-repeat should look this
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>