Related
I'm just learning AngularJS and need to create the report below. I have all the detail lines working well but have no idea how to create the subtotal lines.
Detail lines...
<tr data-ng-repeat-start="t in testReferrers">
<td>{{t.ReferrerName}}</td>
<td>{{t.AddressLine1}}}</td>
<td>{{t.DatePlaced | date:'MM/dd/yyyy'}}</td>
<td>{{t.InvoiceNumber }}</td>
<td>{{t.InvoiceAmountLessDiscount | currency : $ : 2 }}</td>
</tr>
My first attempt at subtotal line, but I don't know how to calculate {{subTotal}} and how to control when this row shows up. I need a grouping and group footer capability but don't know how to do that in AngularJS. I was going to use JQuery to find the subTotalRow and either show or hide...
<tr id="subtotalRow" data-ng-repeat-end style="display:none">
<td colspan=3></td>
<td style="border-top: solid 1px #000000">Total:</td>
<td style="border-top: solid 1px #000000">{{subTotal | currency : $ : 2 }}</td>
</tr>
Desired output...
angular.module('app', []).controller('ctrl', function($scope){
$scope.data = [
{Referrer: 'Henry', Amount: 20, Location: 'NY'},
{Referrer: 'Tom', Amount: 10, Location: 'London'},
{Referrer: 'Sam', Amount: 10, Location: 'Paris'},
{Referrer: 'Henry', Amount: 10, Location: 'NY'},
{Referrer: 'Tom', Amount: 20, Location: 'London'},
{Referrer: 'Henry', Amount: 30, Location: 'NY'}
];
$scope.sum = function(name){
return $scope.data.filter(function(x) { return x.Referrer == name; })
.map(function(x) { return x.Amount; }).reduce(function(a, b) { return a + b; });
}
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.totalRow{
border-style: solid;
}
.total{
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<table>
<thead>
<tr>
<th>Referrer</th>
<th>Location</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-init='next = $index + 1' ng-repeat-start='item in dataSorted = (data | orderBy : "Referrer")'>
<td>{{item.Referrer}}</td>
<td>{{item.Location}}</td>
<td>{{item.Amount}}</td>
</tr>
<tr class='totalRow' ng-repeat-end ng-if='!dataSorted[next] || (dataSorted[next].Referrer != item.Referrer)'>
<td colspan='2' class='total'>Total:</td>
<td>{{sum(item.Referrer)}}</td>
</tr>
</tbody>
</table>
</div>
Found the following issues when using dragular with tables:
When dragging rows, the rows get shrunk.
It does not happen when using them with list. We are using angular 1.6.4
var app = angular.module('myApp', ['dragularModule']);
app.controller('customersCtrl', function($scope,dragularService,$interval) {
$scope.peoples = [
{firstName: 'Elinor', lastName: 'Ramirez',company:'Maxiserve',occupation:'Safety inspector'},
{firstName: 'Kathleen', lastName: 'Norton',company:'Castle Realty',occupation:'Bodyguard'},
{firstName: 'Jay', lastName: 'Joe',company:'Jackpot Consultant',occupation:'Electronic typesetting machine operator'},
{firstName: 'Karl', lastName: 'Lancaster',company:'Bonanza Produce Stores',occupation:'Molding, coremaking, and casting machine setter'},
{firstName: 'Rocio', lastName: 'Roque',company:'Buena Vista Realty Service',occupation:'Social and human service assistant'},
{firstName: 'Keller', lastName: 'Mast',company:'NA',occupation:'NA'},
{firstName: 'Heeth', lastName: 'Quest',company:'NA',occupation:'NA'},
{firstName: 'Sam', lastName: 'Chester',company:'NA',occupation:'NA'},
{firstName: 'Jason', lastName: 'Miller',company:'NA',occupation:'NA'},
{firstName: 'Path', lastName: 'Kals',company:'NA',occupation:'NA'},
{firstName: 'Such', lastName: 'Rita',company:'NA',occupation:'NA'}
];
var timer,
scrollContainer = document.getElementById('parentContainer'),
dragDropContainer = document.getElementById('drag-drop-zone'),
topBar = document.getElementById('topBar'),
bottomBar = document.getElementById('bottomBar');
dragularService.cleanEnviroment();
//initialize the DND container and model
dragularService([dragDropContainer], {
scope: $scope,
containersModel: [$scope.peoples],
lockY: true
});
registerEvents(topBar, scrollContainer, -5,20);
registerEvents(bottomBar, scrollContainer, 5,20);
function registerEvents(bar, container, inc, speed) {
if (!speed) {
speed = 20;
}
angular.element(bar).on('dragularenter', function() {
container.scrollTop += inc;
timer = $interval(function moveScroll() {
container.scrollTop += inc;
}, speed);
});
angular.element(bar).on('dragularleave dragularrelease', function() {
$interval.cancel(timer);
});
}
});
body{
background-color:black;
padding-top:10px;
}
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 15px;
text-align:center;
margin-left:20%;
}
table th{
background-color: blue;
}
table tr:nth-child(odd) {
background-color: lightblue;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
.bar{
height:10px;
position:fixed;
width: 90%;
}
.bar.topBar{
top: 65px;
right: 30px;
}
.bar.bottomBar{
bottom: 0;
}
<html>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src= "https://rawgit.com/luckylooke/dragular/master/dist/dragular.js"></script>
<link rel="stylesheet" href="https://rawgit.com/luckylooke/dragular/master/dist/dragular.css"/>
<body id="parentContainer">
<div ng-app="myApp" ng-controller="customersCtrl">
<div id="topBar" class="bar topBar"><div>
<table id="scrollContainer">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Occupation</th>
</tr>
</thead>
<tbody id="drag-drop-zone">
<tr ng-repeat="person in peoples">
<td class="handle"></td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.company }}</td>
<td>{{ person.occupation }}</td>
</tr>
</tbody>
</table>
<div id="bottomBar" class="bar bottomBar"><div>
</div>
</body>
</html>
https://codepen.io/naveen_vijayaraghavan/pen/KZQLBW
Scroll behaves weirdly. Sometimes it just does not stop scrolling or it does not scroll at all.
I'm trying to create a table using Quandl restful api along with AngularJS. While table headers created well table rows aren't filled with data at all, there are only empty rows.
Here is my controller:
angular.module('stockControllers', [])
.controller('stockController', function($scope, $http){
var results = {};
$http.get('https://www.quandl.com/api/v3/datasets/WIKI/FB.json?start_date=2017-11-01&api_key=3pg7TVEyogz6D6FXhf5g').
then(function(response) {
$scope.resulting = response.data;
console.log($scope.resulting);
});
});
HTML code:
<div ng-controller="stockController">
<div class='page-header'>
<h1> {{resulting.dataset.name}} </h1>
<p> Note: showing only OHLC data </p>
</div>
<table class="table table-striped">
<tr>
<th>{{resulting.dataset.column_names[0]}}</th>
<th>{{resulting.dataset.column_names[1]}}</th>
<th>{{resulting.dataset.column_names[2]}}</th>
<th>{{resulting.dataset.column_names[3]}}</th>
<th>{{resulting.dataset.column_names[4]}}</th>
</tr>
<tr ng-repeat="row in resulting.dataset.data">
<td>{{resulting.dataset.data[row][0]}}</td>
<td>{{resulting.dataset.data[row][1]}}</td>
<td>{{resulting.dataset.data[row][2]}}</td>
<td>{{resulting.dataset.data[row][3]}}</td>
<td>{{resulting.dataset.data[row][4]}}</td>
</tr>
</table>
</div>
And api response fragment which I want to use:
"dataset": {
"column_names": ["Date","Open","High","Low","Close","Volume","Ex-Dividend","Split Ratio","Adj. Open","Adj. High","Adj. Low","Adj. Close","Adj. Volume"],
"data": [["2017-11-13",
177.5,
179.04,
177.3,
178.77,
9431449,
0,
1,
177.5,
179.04,
177.3,
178.77,
9431449 ],,
[
"2017-11-10",
178.35,
179.0999,
177.96,
178.46,
10933405,
0,
1,
178.35,
179.0999,
177.96,
178.46,
10933405 ],,
angular.module('app', []).controller('ctrl', function($scope) {
$scope.resulting = {
dataset: {
column_names: ["Date", "Open", "High", "Low", "Close", "Volume", "Ex-Dividend", "Split Ratio", "Adj. Open", "Adj. High", "Adj. Low", "Adj. Close", "Adj. Volume"],
data: [
["2017-11-13",
177.5,
179.04,
177.3,
178.77,
9431449,
0,
1,
177.5,
179.04,
177.3,
178.77,
9431449
],
[
"2017-11-10",
178.35,
179.0999,
177.96,
178.46,
10933405,
0,
1,
178.35,
179.0999,
177.96,
178.46,
10933405
]
]
}
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app='app' ng-controller='ctrl'>
<thead>
<tr>
<th ng-repeat='head in resulting.dataset.column_names' ng-if='$index < 5'>{{head}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resulting.dataset.data">
<td ng-repeat='val in row track by $index' ng-if='$index < 5'>{{val}}</td>
</tr>
</tbody>
</table>
I am looking a solution for dynamic data structure(inconsistent like different property name and property length) with ng-repeat. sample code are below.
$scope.data = [{
"table":[{
"employee":"name1",
"value1":"10",
"value2":"20"
},
{
"employee":"name2",
"value1":"15",
"value2":"30"
}]
},
{
"table":[{
"company":"name1",
"compnayValue":"12"
},
{
"company":"name2",
"compnayValue":"12"
}]
}]
<ul>
<li ng-repeat="item in data">
<table>
<tr ng-repeat="row in item.table">
<td>{{??}}</td>
<td>{{??}}</td>
</tr>
</table>
</li>
</ul>
You could enumerate all properties and display their values by another ng-repeat on td:
<li ng-repeat="item in data">
<table>
<tr ng-repeat="row in item.table">
<td ng-repeat="(key, value) in row">
{{row[key]}}
</td>
</tr>
</table>
</li>
but that would break the tabular format of data since some rows would have more tds. To prevent that you could first find out the set of all keys on all rows, do a th repeat with those first and then display them on the corresponding td below, e.g.:
<th ng-repeat="propertyName in allPossiblePropertyNames">
{{propertyName}}
</th>
and
<td ng-repeat="propertyName in allPossiblePropertyNames">
{{row[propertyName ]}}
</td>
Use <tbody> to represent an object inside table array and (key,value) syntax mentioned in iterating over object properties section to iterate over it's properties like:
angular.module('test', []).controller('testCtrl', function($scope) {
$scope.data = [{
"table": [{
"employee": "name1",
"value1": "10",
"value2": "20"
}, {
"employee": "name2",
"value1": "15",
"value2": "30"
}]
}, {
"table": [{
"company": "name1",
"compnayValue": "12"
}, {
"company": "name2",
"compnayValue": "12"
}]
}]
});
ul {
padding: 0;
}
ul li {
list-style-type: none;
margin-bottom: 10px;
}
table {
width: 100%;
table-layout: fixed;
background: #ebebeb;
}
tbody:nth-child(odd) tr {
color: #fff;
background: dodgerblue;
}
tbody:nth-child(even) tr {
color: #fff;
background: hotpink;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
<ul>
<li ng-repeat="item in data">
<table>
<tbody ng-repeat="row in item.table">
<tr ng-repeat="(key, value) in row">
<td>
{{key}}
</td>
<td>
{{value}}
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
Check this plunker, you can define template depends on your data :
https://plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview
Use angular filter :
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [{
"table":[{
"employee":"name1",
"value1":"10",
"value2":"20"
},
{
"employee":"name2",
"value1":"15",
"value2":"30"
}]
},
{
"table":[{
"company":"name1",
"compnayValue":"12"
},
{
"company":"name2",
"compnayValue":"12"
}]
}]
})
.filter('isCompnay', function() {
return function(input) {
console.log(input.employee === undefined)
return input.company ? input : undefined;
};
})
.filter('isEmployee', function() {
return function(input) {
console.log(input.employee === undefined)
return input.employee ? input : undefined;
};
});
I have to validate a questionnaire before submitting it. The question-answer tables are generated dynamically from a JSON file. Before submitting the questionnaire, at least one answer should be checked from each question. For an unattempted question, it should validate as 'Please select at least one checkbox/answer'.
My problem: I am able to validate at least once checkbox selection for one question, but I not able to validate for all questions. It validates if any one of the checkbox is selected on whole page. I want each question should have at least one answer selected.
My code shows validation error [Please select at least one checkbox/answer'] even for the selected answer question. It should show validation error only on the questions which are not attempted [i.e. questions whose at least one answer is also not selected].
I have gone through multiple posts on AngularJS group check box validation, but I wasn't able to satisfy my problem.
Can anyone please help me out?
Thanks in advance!
quest_answer.json
[
{
"id": "0",
"header": "Fruits",
"question": "Which fruit do you like?",
"answer": [
{"aid": 0, "value" : "Apple", "isChecked" : false},
{"aid": 1, "value" : "Banana", "isChecked" : false},
{"aid": 2, "value" : "Strawberry", "isChecked" : false},
{"aid": 3, "value" : "Grapes", "isChecked" : false},
{"aid": 4, "value" : "Mango", "isChecked" : false}
],
"notes":""
},
{
"id": "1",
"header": "Vegetables",
"question": "Which vegetable do you like?",
"answer": [
{"aid": 0, "value" : "Potato", "isChecked" : false},
{"aid": 1, "value" : "Spinach", "isChecked" : false},
{"aid": 2, "value" : "Cabbage", "isChecked" : false},
{"aid": 3, "value" : "Brinjal", "isChecked" : false}
],
"notes":""
},
{
"id": "2",
"header": "Color",
"question": "Which color do you like?",
"answer": [
{"aid": 0, "value" : "Red", "isChecked" : false},
{"aid": 1, "value" : "Orange", "isChecked" : false},
{"aid": 2, "value" : "Green", "isChecked" : false},
{"aid": 3, "value" : "Blue", "isChecked" : false},
{"aid": 4, "value" : "Pink", "isChecked" : false}
],
"notes":""
},
{
"id": "3",
"header": "Animal",
"question": "Which animal do you like?",
"answer": [
{"aid": 0, "value" : "Monkey", "isChecked" : false},
{"aid": 1, "value" : "Dog", "isChecked" : false},
{"aid": 2, "value" : "Cat", "isChecked" : false},
{"aid": 3, "value" : "Cow", "isChecked" : false}
],
"notes":""
}
]
questionnaire.html
<div ng-init="init()">
<div class="module">
<div class="module-head">
<center><h3> <b>Evaluation</b> </h3></center>
</div>
<center>
<div class="module-body" >
<div> Questionnaire About the Project/Initiative</div>
<hr>
<form name="qForm" ng-submit="evaluate_Report(qForm.$valid)" novalidate>
<hr>
<div>Question Set</div>
<hr>
<div ng-repeat="myQuestion in questionnaire">
<table id="personal_table" class="table table-striped table-bordered table-hover" style="width:70%">
<tbody>
<hr>
<center><thead>{{myQuestion.header}}</thead></center>
<tr style="width:100%">
<th rowspan="{{questionnaire[$index].answer.length+1}}" scope="rowgroup"style="width:50%">
{{myQuestion.question}}</th>
<th style="width:2%">:</th>
<th style="width:48%">Tick all that apply
<div ng-show="qForm.$submitted && qForm.ansCheck.$error.required">
Please select atleast one checkbox</div>
</th>
</tr>
<tr ng-repeat="answer in questionnaire[$index].answer">
<td><input type="checkbox" name="ansCheck" ng-model="answer.isChecked" ng-change="selectAnswer($parent.$index, $index, answer)" ng-required="!anySelected($parent.$index,answer)" >
</td>
<td> {{answer.value}} </td>
</tr>
<tr style="width:100%">
<td style="width:50%" id="q2">Special Notes</td>
<td style="width:1%">:</td>
<td style="width:49%"><input type=text ng-model="personal_info_notes">
{{myQuestion.notes}} </td>
</tr>
</tbody>
</table>
</div>
<center>
<button type=submit id="btn_evaluate">Evaluate Report</button>
</center>
<hr>
<hr>
</div>
</div>
</div>
questionnaire.js
app.controller('questionnaire', ['$scope','$http','$sce','$routeParams',function($scope,
$http, $sce, $routeParams) {
$scope.questionAttempted = []; // an array containing question ids which are attempted
$scope.questionAnswerAttempted=[];//an array containing answers which are checked
$scope.init=function()
{
$http.get('quest_answer.json').then(function(questionnaireData){
$scope.questionnaire = questionnaireData.data;
});
}
$scope.selectAnswer = function(qIndex, aIndex, selectedAnswer)
{
var selectedIndex = $scope.questionAnswerAttempted.indexOf(selectedAnswer.value);
var selectedQuestion= $scope.questionAttempted.indexOf(qIndex);
if(selectedIndex == -1 && selectedAnswer.isChecked){
$scope.questionAnswerAttempted.push(selectedAnswer.value);
if(selectedQuestion == -1){
$scope.questionAttempted.push(qIndex);
}
}else if(!selectedAnswer.isChecked && selectedIndex != -1){
$scope.questionAnswerAttempted.splice(selectedIndex,1);
var aLength = $scope.questionnaire[qIndex].answer.length;
//Remove the question id from the questionAttempted array only if none of the answers are checked.
if(aLength >0){
for(a=0;a<aLength;a++){
if($scope.questionnaire[qIndex].answer[a].isChecked){
console.log("Atleast one answer is checked for this question.
So no of questions attempted remains same:" + $scope.questionAttempted.length);
flag = false;
break;
}else{
flag = true;
}
}
if(flag){
$scope.questionAttempted.splice(selectedQuestion,1);
console.log("No answers are checked for this question. So removing it");
console.log("No of questions attempted after splicing:" + $scope.questionAttempted.length);
}
}
}
}
// For ng-required attribute of checkboxes. Should return 'true' for attempted question and 'false' for unattempted question
$scope.anySelected = function(qIndex,answer){
var qaLength =$scope.questionAttempted.length;
if(qaLength > 0){
for(var q = 0; q < qaLength ; q++){
if($scope.questionAttempted[q] == qIndex ){
return true;
}else{
return false;
}
}
}else{
return false;
}
}
$scope.evaluate_Report = function(isValid)
{
if(isValid){
alert('Form is valid');
}else{
alert('Form is Incomplete');
}
}
}]);
app.controller('questionnaire', ['$scope','$http','$sce','$routeParams',function($scope, $http, $sce, $routeParams) {
$scope.questionAttempted = []; // an array containing question ids which are attempted
$scope.questionAnswerAttempted=[];//an array containing answers which are checked
$scope.init=function()
{
$http.get('quest_answer.json').then(function(questionnaireData){
$scope.questionnaire = questionnaireData.data;
});
}
$scope.selectAnswer = function(qIndex, aIndex, selectedAnswer)
{
var selectedIndex = $scope.questionAnswerAttempted.indexOf(selectedAnswer.value);
var selectedQuestion= $scope.questionAttempted.indexOf(qIndex);
if(selectedIndex == -1 && selectedAnswer.isChecked){
$scope.questionAnswerAttempted.push(selectedAnswer.value);
if(selectedQuestion == -1){
$scope.questionAttempted.push(qIndex);
}
}else if(!selectedAnswer.isChecked && selectedIndex != -1){
$scope.questionAnswerAttempted.splice(selectedIndex,1);
var aLength = $scope.questionnaire[qIndex].answer.length;
//Remove the question id from the questionAttempted array only if none of the answers are checked.
if(aLength >0){
for(a=0;a<aLength;a++){
if($scope.questionnaire[qIndex].answer[a].isChecked){
console.log("Atleast one answer is checked for this question. So no of questions attempted remains same:" + $scope.questionAttempted.length);
flag = false;
break;
}else{
flag = true;
}
}
if(flag){
$scope.questionAttempted.splice(selectedQuestion,1);
console.log("No answers are checked for this question. So removing it");
console.log("No of questions attempted after splicing:" + $scope.questionAttempted.length);
}
}
}
}
// For ng-required attribute of checkboxes. Should return 'true' for attempted question and 'false' for unattempted question
$scope.anySelected = function(qIndex,answer){
var qaLength =$scope.questionAttempted.length;
if(qaLength > 0){
for(var q = 0; q < qaLength ; q++){
if($scope.questionAttempted[q] == qIndex ){
return true;
}else{
return false;
}
}
}else{
return false;
}
}
$scope.evaluate_Report = function(isValid)
{
if(isValid){
alert('Form is valid');
}else{
alert('Form is Incomplete');
}
}
}]);
.module {
/* box-shadow: 0 0 3px rgba(0,0,0,.1); */
border-color: #e9e9e9;
margin-bottom: 50px;
background-color: #fff;
/* border-radius: 4px;*/
/* -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);*/
box-shadow: 0 1px 1px rgba(0,0,0,.05);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.2);
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
.module-head {
color: #767676;
background-color: #f6f6f6;
border-color: #e9e9e9;
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.module-head h3 {
font-size: 20px;
line-height: 20px;
height: 20px;
margin: 0;
font-weight: bold;
}
.module-body {
padding: 15px;
width:1350px;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='REFRESH' content='43200'/>
<meta name="Pragma" content="no-cache;">
<title>Web</title>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/theme.css">
</head>
<body ng-app="app">
<div ng-init="init()">
<div class="module">
<div class="module-head">
<center><h3> <b>Evaluation</b> </h3></center>
</div>
<center>
<div class="module-body" >
<div> Questionnaire About the Project/Initiative</div>
<hr>
<form name="qForm" ng-submit="evaluate_Report(qForm.$valid)" novalidate>
<hr>
<div>Question Set</div>
<hr>
<div ng-repeat="myQuestion in questionnaire">
<table id="personal_table" class="table table-striped table-bordered table-hover" style="width:70%">
<tbody>
<hr>
<center><thead>{{myQuestion.header}}</thead></center>
<tr style="width:100%">
<th rowspan="{{questionnaire[$index].answer.length+1}}" scope="rowgroup"style="width:50%">{{myQuestion.question}}</th>
<th style="width:2%">:</th>
<th style="width:48%">Tick all that apply <div ng-show="qForm.$submitted && qForm.ansCheck.$error.required">Please select atleast one checkbox</div> </th>
</tr>
<tr ng-repeat="answer in questionnaire[$index].answer">
<td><input type="checkbox" name="ansCheck" ng-model="answer.isChecked" ng-change="selectAnswer($parent.$index, $index, answer)" ng-required="!anySelected($parent.$index,answer)" >
</td><td> {{answer.value}} </td>
</tr>
<tr style="width:100%">
<td style="width:50%" id="q2">Special Notes</td>
<td style="width:1%">:</td>
<td style="width:49%"><input type=text ng-model="personal_info_notes">{{myQuestion.notes}} </td>
</tr>
</tbody>
</table>
</div>
<center><button type=submit id="btn_evaluate">Evaluate Report</button></center>
<hr>
<hr>
</div>
</div>
</div>
</center>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src= "scripts/core/angular/angular.js"></script>
<script src= "scripts/core/angular/angular-route.js"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/controllers/questionnaire.js" type="text/javascript"></script>
</body>
</html>