Angularjs. Ng-repeat. Group of radio buttons doesn't work properly - javascript

Here is my example.
As a result there is generated two groups of radio buttons.
But group with properly checked item is only one.
It works ok, but why needed item in another group is unchecked?
Here is code:
<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
</head>
<script>
var app = angular.module('test', []);
function test1($scope)
{
$scope.test = [1,2,3];
$scope.generateChartId = function (stn)
{
return "chart" + stn;
};
$scope.generateRadioOptionName = function (stn)
{
return "optionsRadios" + stn;
};
$scope.generateRadioOptionId = function (stn, num)
{
return "optionsRadio" + stn + num;
};
}
</script>
<body ng-app="test">
<div id="example" >
<div class="box-col row" ng-repeat="stn in [1,2]">
<div ng-controller="test1">
<div>
<label>
<input type="radio" name="{{generateRadioOptionName(stn)}}"
id="{{generateRadioOptionId(stn,1)}}" checked>
XYZ
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="{{generateRadioOptionName(stn)}}"
id="{{generateRadioOptionId(stn,2)}}">
ENU
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance!


You are missing <form> tag, also your html is a bit "untidy" - you should close <input> tags
Working example :
http://jsfiddle.net/michal_taborowski/L77x525s/


ng-controller="..." and ng-repeat="..." should swap places.


I'm having a similar issue, and the wierd thing is is that it works with Angular 1.0.2, but as soon as I upgraded to 1.4.8, it stopped working correctly. What I'm hoping the behavior to be is that all the radio groups should have a preset item selected, but what is happening is that only the last group in each panel is being selected
Please see jsfiddle
This is the html
<body ng-controller="Channels" class="container-fluid">
<div ng-if="sections===null">
Loading...
</div>
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<table class="table">
<thead>
<th class="col-md-6">Name</th>
<th class="col-md-2 text-center">Read</th>
<th class="col-md-2 text-center">ReadWrite</th>
<th class="col-md-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-md-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-md-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-md-2 text-center radio">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-md-2 text-center radio">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>

Related

thymeleaf: Retain selected value in dropdown

I am creating a simple webpage for report generation using springboot + thymeleaf. I have 2 dropdown values one dependent on another. I have tried selecting value in dropdown and upon selection, i have onchange event that calls JavaScript to get the values for the selected dropdown. While it does that, the selected value is not retaining in the dropdown, it get reset to default option.
I tried ways suggested in forums but none are easy for me to understand.
I have provided my code snippet below, please educate me what can i do to get my value retained in the first dropdown..
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="../static/css/bootstrap.css" rel="stylesheet" th:href="#{/css/bootstrap.css}"/>
<link href="../static/css/start-test-view.css" rel="stylesheet" th:href="#{/css/start-test-view.css}"/>
</head>
<script>
function retrieveAppName() {
if (history.pushState) {
var selectedLOB = document.getElementById('lob').value;
var _url = location.href;
var newurl = ( _url.indexOf('lob') !== -1 ) ? _url : _url+'lob?lob='+selectedLOB;
window.history.pushState({path:newurl},'',newurl);
location.reload();
}
}
</script>
<body>
<div align="center">
<div class="container">
<div class="row">
<div class="navbar-logo">
<img alt="Dashboard" th:src="#{/img/logo.svg}">
</div>
</div>
</div>
<header>
<div class="navbar-primary">
<div class="container">
<div class="row">
<span class="portal">Report Summary</span>
</div>
</div>
</div>
<div class="navbar-secondary"></div>
</header>
<div align="Left">
<div class="container main-content">
<div class="row card">
<form class="form" th:action="#{/}" th:object="${dashboardParams}" method="post">
<div class="row">
<div class="col-sm-6 text-container">
<label class="input-label">Line Of Business</label>
<select th:name="lob" class="input-field" id="lob" name="lob" onchange="retrieveAppName()">
<option value="0">--select LOB--</option>
<option value="1">ALL</option>
<option th:each="lob:${listLOB}"
th:value="${lob.line_of_business}"
th:text="${lob.line_of_business}"></option>
</select>
</div>
<div class="col-sm-6 text-container">
<label class="input-label">Application Name</label>
<select class="input-field" id="appName" name="Application Name">
<option value="0">--select Name--</option>
<option value="1">ALL</option>
<option th:each="app:${listAppName}"
th:value="${app.app_Name}"
th:text="${app.app_Name}"></option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6 text-container">
<label class="input-label">Start Date</label>
<input class="input-field" type="date" id="sDate" name="Start Date"/>
</div>
<div class="col-sm-6 text-container">
<label class="input-label">End Date</label>
<input class="input-field" type="date" id="eDate" name="End Date"/>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<button name="Generate Report" class="submit" type="submit">Generate Report</button>
</div>
</div>
</form>
</div>
</div>
</div>
<br/><br/>
<div class="table">
<table class="table table-bordered table-sm">
<thead class ="thead-light">
<tr>
<th>Application ID</th>
<th>Application Name</th>
<th>Status</th>
<th>TestCase Path</th>
<th>Environment</th>
<th>Execution Date</th>
</tr>
</thead>
<tbody>
<tr th:each="runs : ${listRuns}">
<td th:text="${runs.app_ID}">Application ID</td>
<td th:text="${runs.app_Name}">Application Name</td>
<td th:text="${runs.status}">Status</td>
<td th:text="${runs.testcasepath}">TestCase Path</td>
<td th:text="${runs.environment}">Environment</td>
<td th:text="${runs.execdate}">Execution Date</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Controller Code:
#GetMapping("/lob")
public ModelAndView viewLOB(Model model, #RequestParam(value="lob", required=false) String lob) {
List<AppData> lobName = dao.listLOB();
List<AppData> appName = dao.listAppName(lob);
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("listLOB", lobName);
modelAndView.addObject("listAppName",appName);
model.addAttribute("lastselected", lobName);
modelAndView.setViewName("dashboardParams");
return modelAndView;
}

Values from JSP are not getting to javascript

I have a very weird problem.
I have a jsp in which I populated values from database through jstl tags. I want to read the checked rows into Javascript, but I am not able to get these values into my js file.
I used jQuery, dojo and normal JavaScript to read these values and display in web console, they just don't work.
Can some one please review and let me know why the values cannot be read in javascript? Below is the code snippet of my jsp.
<div class="table-responsive">
<table class="table">
<thead></thead>
<tbody>
<c:forEach var="emailItemType"
items="${emailFormModel.getEMailFormDisplayData().getEMailItemTypes()}">
<tr class="accordion-toggle collapsed" id="accordion1"
data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<th class="expand-button"></th>
<th>
<c:out value="${emailItemType.key}"/>
</th>
<th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
</th>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="3">
<div id="collapseOne" class="collapse">
<c:forEach var="emailItemTypeAttr" items="${emailItemType.value}"
varStatus="idx">
<div class="row">
<div class="col-sm-1">
<input type="checkbox" data-dojo-attach-point="checkBox"
name="checkBox" id="checkbox"
data-dojo-type="dijit.form.CheckBox"
class="dijitCheckBox" value="check1">
</div>
<div class="col-sm-2 text-nowrap" id="sourceValue"
name="sourceValue" data-dojo-attach-point="sourceValue"
value="${emailItemTypeAttr.getSourceValue()}">
<c:out value="${emailItemTypeAttr.getSourceValue()}"/>
</div>
<div class="col-sm-2 text-nowrap"
data-dojo-attach-point="userIdValue" name="userIdValue">
<c:out value="${emailItemTypeAttr.getUserIdValue()}"/>
</div>
<div class="col-sm-2 text-nowrap"
data-dojo-attach-point="objectId" name="objectId">
<c:out value="${emailItemTypeAttr.getObjectId()}"/>
</div>
</div>
</c:forEach>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
Below is my Js code :
dojo code :
require([
"dojo/request",
"dojo/dom",
"dojo/dom-attr",
"dijit/registry",
"dojo/text!./templates/email.jsp"
], function (request,dom,domattr,registry,template) {
var source = thisForm.sourceValue.get('value');
console.log("var is :" + source);
var checkboxes = registry.findWidgets(dom.byId('checkbox'));
console.log(checkboxes);
var SourceValue = registry.byId("sourceValue").get('value');
console.log("sourceValue from regitry id:"+ SourceValue);
var sourceValue = dojo.byId("sourceValue").value;
console.log("sourceValue from dojobyid:"+ sourceValue);
});
JavaScript code throws error saying it is undefined:
var sourceValue = document.getElementById("sourceValue").textContent;;
console.log("sourceValue:"+sourceValue);
Code below is in jquery, which is for selecting all the checkboxes when the above check box is checked. This works but doesn't still display the source value.
$(document).ready(function () {
var sourceValue = $('#sourceValue').val();
console.log('sourceValue:' + sourceValue);
$('#select_all').on('click', function () {
if (this.checked) {
$('.dijitCheckBox').each(function () {
this.checked = true;
});
} else {
$('.dijitCheckBox').each(function () {
this.checked = false;
});
}
});
$('.dijitCheckBox').on('click', function () {
if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) {
$('#select_all').prop('checked', true);
} else {
$('#select_all').prop('checked', false);
}
});
});
Nothing just works, please help as I am working on this for a long time.

When checkbox dijitCheckBox is clicked you can use find() and closest() method of jquery to get the value which you need using classname.
Demo Code:
$(document).ready(function() {
$('#select_all').on('click', function() {
if (this.checked) {
$('.dijitCheckBox').each(function() {
this.checked = true;
//checkbox->closest <tr>--> find class with name sourceValue
console.log($(this).closest('tr').find('.sourceValue').text() + " | ");
});
//same do with other div just change classs name
} else {
$('.dijitCheckBox').each(function() {
this.checked = false;
});
}
});
$('.dijitCheckBox').on('click', function() {
//when checkbox is clicked find closest tr with class sourceValue
var source_value = $(this).closest('tr').find('.sourceValue').text();
console.log("sourceValue:"+source_value);
if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) {
$('#select_all').prop('checked', true);
} else {
$('#select_all').prop('checked', false);
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead></thead>
<tbody>
<tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<th class="expand-button"></th>
<th>
<!--<c:out value="${emailItemType.key}" />-->123
</th>
<th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
</th>
</tr>
<tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
<th class="expand-button"></th>
<th>
<!--<c:out value="${emailItemType.key}" />-->345
</th>
<th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
</th>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="3">
<div id="collapseOne" class="collapse">
<div class="row">
<div class="col-sm-1">
<input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1">
</div>
<div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}">Abc </div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 1</div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId"> 2 </div>
</div>
</td>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="3">
<div id="collapseTwo" class="collapse">
<div class="row">
<div class="col-sm-1">
<input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1">
</div>
<div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}"> xyz </div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 2 </div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId">3</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

dirpaginate results in same number of rows for different scope variables

I have 3 list items and for each I have a div:-
<div class="tabs">
<h3>Legislaotrs</h3>
<ul class="nav nav-tabs">
<li class="active">By State</li>
<li>House</li>
<li>Senate</li></ul>
</div>
The div's are as follows:-
<div id="ByState">
<div class="search" style="float: right;">
<form class="form-inline">
<div class="form-group">
<label>Search</label>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>

</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|orderBy:['state_name','fullname']|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
</div>
The second div:-
<div id="ByHouse" style="display: none;">
<div class="search" style="float: right;">
<form class="form-inline">
<div class="form-group">
<label>Search</label>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>

</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in house|orderBy:['fullname']|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
</div>
The 3rd div:-
<div id="BySenate" style="display: none">
<div class="search" style="float: right;">
<form class="form-inline">
<div class="form-group">
<label>Search</label>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>

</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in senate|orderBy:['fullname']|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
</div>
The problem is that the dirpaginate that repeats over the $scope variables produces the same number of results. The $scope.users has 538 rows, the $scope.house has 438 rows while the $scope.senate has 100 rows. But each of the divs above produces only 100 rows. Can someone please help me where I am going wrong. If I comment out the last 2 divs then the first div gives the correct number of rows. So basically the combination of all 3 doesnot work but individually they work fine. Can some one please help now??

All the were going for the default pagination-id because I had not given any pagination-id. Created pagination-id for each div and then placed the under each table with the respective pagination-id attribute. This solved the issue.
The changes in my code:-
<tr dir-paginate="senate in senate|orderBy:['fullname']|filter:search|itemsPerPage:10" pagination-id="bySenate">
and
<div id="controls" class="controls" align="center">
<dir-pagination-controls
pagination-id="bySenate"
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
Made the above changes for all the three div's in question.

How can load partial view via angularjs ng-view and ng-route directives

I am completely new in Angular.
I want to load two different partial views with singleton controller by using ng-Route and ng-view.But every time when I executed below SpecialFields.cshtml that I got this type of error.
I have searched many times and test a lot of points in stack overflow like this:
angular multiple routes sharing one controller.
But code didn't work properly.
How can i solve this problem and how can I render partial views by ng-view and ng-route?
Thanks in advance
SpecialField.cshtml is:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/App/Patients/SpecialFields/specialFieldController.js"></script>
<script src="~/App/Common/Services/StorageService.js"></script>
<div class="row" style="font-family:BYekan">
<div class="col-md-12">
<div class="portlet light portlet-fit bordered">
<div class="portlet-title">
<div class="caption">
<i class=" fa fa-cog font-green"></i>
<span class="caption-subject font-green bold uppercase">SpecialFields config</span>
</div>
</div>
<div class="portlet-body" ng-app="SpecialFields" ng-controller="SpecialFieldsController">
<div class="row" style="margin:0 1px;direction:rtl">
<div class="col-md-12">
<div class="row panel panel-default">
<div class="panel-body">
<form name="frm" class="form-inline" >
<div class="form-group col-md-6">
<label for="fieldname" class="bold control-label">Field Name</label>
<span class="required">*</span>
<input type="text" name="fieldname" id="fieldname" class="form-control" required ng-model="specialfieldname" />
</div>
<div class="form-group col-md-5 col-md-pull-1" >
<label for="fieldtype" class="bold control-label">Field Type:</label>
<span class="required"> * </span>
<select id="fieldtype" class="form-control" ng-model="specialfieldtype" ng-options="option for option in [Item1,Item2]">
<option value="" class="placeholder" selected disabled>Item1</option>
</select>
<button class="btn btn-primary " type="submit" ng-click="addSpecialfield()">
Add
<span class="fa fa-plus-square-o" style="padding-right:5px;"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<table class="table table-striped table-bordered" id="sfields">
<thead>
<tr>
<th> Index</th>
<th>Field name</th>
<th>Field Type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="specialfield in specialfields">
<td class="col-sm-2">
{{$index+1}}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldname }}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldtype }}
</td>
<td class="col-sm-1">
<a href="#/update" class="btn btn-default">
Edit
<span class="glyphicon glyphicon-check"></span>
</a>
</td>
<td class="col-sm-1">
<a href="#" class="btn btn-danger" ng-click="deleteSpecialfield(specialfield)">
Delete
<span class="fa fa-remove"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
this is specialFieldController.js
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
// Create the AngularJS app
var app = angular.module('SpecialFields', ['common']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'SpecialFieldsController',
templateUrl: '/List.html'
})
.when('/update', {
controller: 'SpecialFieldsController',
templateUrl: '/Update.html'
})
});
// Create the Controller
app.controller('SpecialFieldsController', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
//Read the Sfield List from LocalStorage
$scope.specialfields = getLocalStorage.getSpecialfields();
//Count the SpecialFields List
$scope.count = $scope.specialfields.length;
//Add Sfield - using AngularJS push to add sfield in the sfield Object
//Call BindTable_SpecialField to update the locally stored Sfield List
//Reset the AngularJS SpecialField scope
//Update the Count
$scope.addSpecialfield = function () {
$scope.specialfields.push({'specialfieldname': $scope.specialfieldname, 'specialfieldtype': $scope.specialfieldtype });
getLocalStorage.BindTable_SpecialField($scope.specialfields);
//$scope.sfno = '';
$scope.specialfieldname = '';
$scope.specialfieldtype = '';
$scope.count = $scope.specialfields.length;
};
//Delete Sfield - Using AngularJS splice to remove the sfield row from the sfield list
//All the Update sfield to update the locally stored sfield List
//Update the Count
$scope.deleteSpecialfield = function (specialfield) {
$scope.specialfields.splice($scope.specialfields.indexOf(specialfield), 1);
getLocalStorage.BindTable_SpecialField($scope.specialfields);
$scope.count = $scope.specialfields.length;
};
}]);
}
and this is StorageService.js
var storageService = angular.module('common', []);
storageService.factory('getLocalStorage', function () {
var specialfieldList = {};
return {
list: specialfieldList,
BindTable_SpecialField: function (SpecialfieldsArr) {
if (window.localStorage && SpecialfieldsArr) {
//Local Storage to add Data
localStorage.setItem("specialfields", angular.toJson(SpecialfieldsArr));
}
specialfieldList = SpecialfieldsArr;
},
getSpecialfields: function () {
//Get data from Local Storage
specialfieldList = angular.fromJson(localStorage.getItem("specialfields"));
return specialfieldList ? specialfieldList : [];
}
};
});
** Edit 2: Div with class portlet-body will have ng-view directive and will be my placeholder of my views.all of codes in this div will move
to List.html.another html file that will be rendered is Update.html
which it renders when Edit button will be clicked.

How to delete Data from subarray?

Within the following table I have a two small problems!
First:
Adding and deleting trips works fine. Maybe someone can give me a hint how to delete my entries from subarray - DAYS within a trip?
Second:
When I create a new trip, I am not able to create new DAYS within. I think this is because of the missing array DAYS which is not created when adding a new trip. I have searched for hours but I was not able to find a working solution !
Sorry I am new to this stuff...
Here's my code and plunker url
http://plnkr.co/edit/MRAhLk7NxZHx4mTLaYxt?p=preview
index.html
<body ng-controller="TripController">
<div class="row" style="margin-top: 50px;">
<div class="col-md-10 col-md-offset-1">
<form name="addTrip" ng-submit="addTrip()">
<input ng-model="newtrip" type="text" name="newtrip" placeholder="YYYY-MM-DD" required />
<button ng-disabled="addTrip.$invalid">Add Trip</button>
</form>
<div class="alert alert-info" role="alert" ng-repeat="trip in trips">
<h5>Startdatum: {{trip.Startdate | date:'dd.MM.yyyy'}} <a class="pull-right" ng-click="deleteTrip($index)">x</a></h5>
<table class="table">
<tr>
<th>DATE
</th>
<th></th>
<th></th>
</tr>
<tr ng-repeat="day in trip.DAYS | orderBy:predicate:!reverse" style="background-color: #CCC;">
<td width="25%;">{{day.DATE | date:'dd.MM.yyyy'}}</td>
<td width="25%;">
<input ng-model="day.IATA" />
</td>
<td width="25%;">
<input ng-model="day.DUTY" />
</td>
<td width="25%;">
<a ng-click="deleteDay()"></a>
</td>
</tr>
</table>
<form name="dayForm" ng-controller="DayController as dayCtrl" ng-submit="dayCtrl.addDay(trip)">
<div class="row">
<div class="col-xs-3 col-md-3">{{dayCtrl.day.DATE | date:'dd.MM.yyyy'}}</div>
<div class="col-xs-3 col-md-3">{{dayCtrl.day.IATA}}</div>
<div class="col-xs-3 col-md-3">{{dayCtrl.day.DUTY}}</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3">
<input ng-model="dayCtrl.day.DATE" type="text" class="form-control" placeholder="DATE (YYYY-MM-DD)" title="DATE" required />
</div>
<div class="col-xs-3 col-md-3">
<input ng-model="dayCtrl.day.IATA" type="text" class="form-control" placeholder="IATA" title="IATA" />
</div>
<div class="col-xs-3 col-md-3">
<input ng-model="dayCtrl.day.DUTY" type="text" class="form-control" placeholder="DUTY" title="DUTY" />
</div>
<div class="col-xs-3 col-md-3">
<button type="submit" ng-disabled="addDay.$invalid" class="btn btn-primary">Add</button>
</div>
</div>
</form>
</div>
</div>
</div>
{{trips}}
</body>
script.js
(function() {
var app = angular.module('showTrips', []);
app.controller('TripController', ['$scope', '$http', function ($scope, $http){
$http.get('trips.json').success(function(data) {
$scope.trips = data;
$scope.addTrip = function(){
$scope.trips.push({'Startdate':$scope.newtrip})
$scope.newtrip = ''
}
$scope.deleteTrip = function(index){
$scope.trips.splice(index, 1);
}
});
}]);
app.controller("DayController", function(){
this.day = {};
this.addDay = function(trip)
{
trip.DAYS.push(this.day);
this.day = {};
}
});
})();

How about:
1)
$scope.delTripDay = function(trip, index) {
trip.DAYS.splice(index, 1);
}
<a ng-click="delTripDay(trip, $index)">DEL</a>
2)
$scope.trips.push({'Startdate':$scope.newtrip, DAYS: []})
Working Plunkr

Categories

Resources