I try to use a toggle-button to show and hide a row of my table. Unfortunately, it does not work and I get no error in the console. Debugging AngularJS is quite hard for a beginner. If I put links between it works. But I need the toggle-Button outside of my table.
Here is the fiddle, which do not work.
fiddle
Thank you!
HTML
<body ng-app="lexoffice" ng:controller="CtrlInvoice">
<table ng-repeat="field in data.fields">
<tbody>
<tr class="trShipping" ng-hide="field.isRowHidden">
<td><input>{{field.shippingcosts}}</input></td>
<td><textarea type="text" ng:model="selectionCurrency"></textarea></td></tr>
</tbody>
</table>
<div class="btn-group btn-group-shipping" data-toggle="buttons">
<label class="btn btn-default shipping-radio">
<input type="radio" class="btn" ng-click="hideShippingCosts(field)">
Hide Row</label>
<label class="btn btn-default shipping-radio">
<input type="radio" class="btn" ng-click="showShippingCosts(field)">
Show Row</label>
</div>
SCRIPT
var myApp = angular.module('lexoffice', []);
function CtrlInvoice($scope) {
$scope.data = {
fields: [{
shippingcosts: 0.00,
isRowHidden: false
}]
};
$scope.hideShippingCosts = function (field) {
field.shippingcosts = 0.00;
field.isRowHidden = true;
}
$scope.showShippingCosts = function (field) {
field.shippingcosts = 0.00;
field.isRowHidden = false;
}
}
So to hide the shipping cost row, you'll want to put the ng-hide on the <tr> with the shipping cost. You also need to repeat the toggle buttons since it seems its per row. Here is the fiddle: http://jsfiddle.net/BAEh2/
updated HTML
<div ng-controller="CtrlInvoice">
<table ng-repeat="field in data.fields">
<tbody>
<tr class="trShipping">
<td ng-hide="field.isRowHidden"><input ng-model="field.shippingcosts"/></td>
<td><textarea type="text" ng-model="selectionCurrency"></textarea></td>
<td>
<div class="btn-group btn-group-shipping" data-toggle="buttons">
<label class="btn btn-default shipping-radio"ng-click="hideShippingCosts(field)" ng-class="{'active': field.isRowHidden}">
<input type="radio" class="btn" />
Hide Row</label>
<label class="btn btn-default shipping-radio" ng-click="showShippingCosts(field)" ng-class="{'!active': field.isRowHidden}">
<input type="radio" class="btn" />
Show Row</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
update JS (just added more rows to show repeat)
var myApp = angular.module('lexoffice', []);
function CtrlInvoice($scope) {
$scope.data = {
fields: [{
shippingcosts: 1.00,
isRowHidden: false
},
{
shippingcosts: 2.00,
isRowHidden: false
},
{
shippingcosts: 3.00,
isRowHidden: true
}]
};
$scope.hideShippingCosts = function (field) {
field.shippingcosts = 0.00;
field.isRowHidden = true;
};
$scope.showShippingCosts = function (field) {
field.shippingcosts = 0.00;
field.isRowHidden = false;
};
}
Related
so following is my Dynamically created template, it has an issue, when i add my template, it brings values from the previous DOM. Where was i want new to be empty.
Following is my HTML file, and my-custom-row-template is where i am repeating my template, now i assume that $index will create a new index, and values/DOM wouldn't repeat.
<section class="main_container">
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/></th>
<th scope="col">Setup Responses</th>
<th>Add Condition</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td scope="col">
<input type="checkbox" ng-model="personalDetail.selected"/>
</td>
<td scope="col" class="col-xs-10">
<div ng-repeat="condition_set in conditions track by $index" my-custom-row-template></div>
</td>
</td>
<td scope="col">
<input type="button" value="Add Condition" ng-click="addCondition()"
class="btn btn-primary addnew"/>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button"
class="btn btn-danger pull-right"
ng-click="remove()" value="Remove">
<input type="button" class="btn btn-primary addnew pull-right" value="Add New" ng-click="addNew()">
<input type="submit" class="btn btn-primary pull-right" value="Save">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</span>
And this is my template code
<div class="col-xs-8 pull-left">
<div class="row form-group">
<!--<select ng-model="response.condition" style="color: black;">-->
<!--<option>Response Message</option>-->
<!--<option>IF</option>-->
<!--<option>Else</option>-->
<!--</select>-->
<select ng-model="selectedCondition[$index]">
<option ng-repeat="x in conditions.condition_set" value="{{x.name}}">{{x.value}}</option>
</select>
<input ng-show="selectedCondition=='0'" type="text" class="form-control"
ng-model="personalDetail[$index].message"/>
<input ng-show="selectedCondition=='1'" type="text" class="form-control"
ng-model="conditions[$index].response"/>
<input ng-show="selectedCondition=='2'" type="text" class="form-control"
ng-model="conditions[$index].elseMessage"/>
<select ng-show="selectedCondition=='1'" ng-model="goToStepOrNew">
<option ng-repeat="x in conditions[$index].create_new_conditions" value="{{x.name}}">{{x.value}}</option>
</select>
<input type="button" value="Remove Condition" ng-click="remove_condition($index)" class="btn btn-danger"/>
</div>
</div>
And this is how i am handling it within my controller
$http({
method: "POST",
url: "team_lead_showed_contacts/ajax",
data: $.param(obj),
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
transformResponse: [function (data) {
var str = '';
str = data.toString();
str = str.replace(/\\/g, 0);
return str;
}]
}).then(function (response) {
//debugger;
$scope.campaigns = JSON.parse(response.data);
$scope.personalDetails = [
{
'add_tempalte': '<div my-custom-row-template> </div>',
}
];
$scope.addNew = function (personalDetail) {
$scope.personalDetails.push({
'add_template': '<div my-custom-row-template> </div>',
});
};
function triggerNewRow($scope) {
if ($scope.goToStepOrNew == 0) {
}
}
$scope.remove = function () {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function (selected) {
if (!selected.selected) {
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function (personalDetail) {
personalDetail.selected = $scope.selectedAll;
});
};
$scope.conditions = [];
$scope.conditions.push('myCustomRowTemplate');
$index = 0;
$scope.addCondition = function () {
$scope.conditions.push('myCustomRowTemplate');
};
$scope.conditions.condition_set = [
{name: 0, value: 'Response Message'},
{name: 1, value: 'IF'},
{name: 2, value: "ELSE"}
];
$scope.conditions.create_new_conditions = [
{name: 0, value: 'Create Step'},
];
$scope.remove_condition = function (element) {
$scope.conditions.splice(element, 1);
// console.log(element);
};
});
For Reference i am attaching an image to give an idea, to what happens when i copy Add New. Copy of already present Elements is pushed into the DOM.
EDIT
Tried some thing like this following Kinda same issue like this post
but no effect.
$scope.personalDetails = [
{
'add_template': '<div my-custom-row-template> </div>',
}
];
var newStep = angular.copy($scope.personalDetails);
$scope.addNew = function (personalDetail) {
$scope.personalDetails.push(
newStep
);
};
I am using ngtable (1.0.0) to display records fetched from server side. My controller js looks like this:
ristoreApp.controller("fmCtrl",
['$scope', '$filter', 'fmFactory', 'NgTableParams', function($scope, $filter, fmFactory, NgTableParams) {
var self = this;
$scope.selection = '0';
$scope.fmSearch = function () {
if ($scope.selection == '0') {
self.tableParams = new NgTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
frReportId: 'asc'
}
}, {
getData: function (params) {
return fmFactory.getAll()
.then(function(response) {
var reports = response.data;
params.total(reports.length);
console.log(params.total());
var sorted = params.sorting() ? $filter('orderBy')(reports, params.orderBy()) : reports;
return sorted.slice((params.page() - 1) * params.count(), params.page() * params.count());
});
}
});
}
}
}]
)
HTML for the table:
<div ng-controller="fmCtrl as fm">
<div class="container">
<div class="row top-margin-80">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" ng-model="keyword" placeholder="Enter MRN or report ID" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Search by</label>
<select class="form-control" ng-model="selection">
<option value="0" selected>All Reports</option>
<option value="1" >MRN</option>
<option value="2">ReportID</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="optionword" ng-hide="selection == '0'"/>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" ng-click="fmSearch()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<table ng-table="fm.tableParams" class="table table-bordered table-striped table-condensed" show-filter="false">
<tr ng-repeat="report in $data">
<td data-title="'ReportId'" filter="{frReportId: 'text'}" sortable="'frReportId'" class="text-center">
{{report.frReportId}}</td>
<td data-title="'BlockId'" filter="{frBlockId: 'text'}" sortable="'frBlockId'" class="text-center">
{{report.frBlockId}}</td>
<td data-title="'MRN'" filter="{mrn: 'text'}" sortable="'mrn'" class="text-center">
{{report.mrn}}</td>
<td data-title="'Name'" filter="{frFullName: 'text'}" sortable="'frFullName'" class="text-center">
{{report.frFullName}}</td>
<td data-title="'Diagnosis'" filter="{frDiagnosis: 'text'}" sortable="'frDiagnosis'" class="text-center">
{{report.frDiagnosis}}</td>
<td data-title="'File'" class="text-center"><a ng-href="{{report.filepath}}">{{report.frReportId}}.xml</a>
</td>
</tr>
</table>
</div>
</div>
It works, well sort of. Problem is whenever I click on the titles to sort and page button to go to next page, it makes an ajax call to server to retrieve data again. I have over 2000 records in the database, every time I do something to the table, it takes 5 seconds to respond which is very annoying. How do I make it load the data only the first time and cache it on client side for future manipulation?
Finally got it to work. Solution is to move the ajax call var Ajax = fmFactory.getAll(); outside ngtable constructor.
var Ajax = fmFactory.getAll();
self.tableParams = new NgTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
frReportId: 'asc'
}
}, {
getData: function (params) {
return Ajax.then(function(response) {
var reports = response.data;
params.total(reports.length);
console.log(params.total());
var sorted = params.sorting() ? $filter('orderBy')(reports, params.orderBy()) : reports;
return sorted.slice((params.page() - 1) * params.count(), params.page() * params.count());
});
}
});
I have 3 values in an object empID,empName,empEmail like this
my problem is in the function gettemplete function(),
var app = angular.module('myApp' , []);
app.controller('myCtrl' , function($scope){
$scope.count=0;
$scope.employees = [{empID:$scope.count+1,empName:'lin',empEmail:'b#1.in'},{empID:$scope.count+1,empName:'test',empEmail:'aaa#3.com'}];
$scope.employeeData = {};
$scope.selected = {};
$scope.addEmployee = function(){
$scope.employees.push({
empName : $scope.empName,
empEmail : $scope.empEmail
});
console.log($scope.employees);
};
$scope.deleteEmployee = function(employee){
var index = $scope.employees.indexOf(employee);
$scope.employees.splice(index,1);
console.log($scope.employees);
};
$scope.getTemplate = function (employee) {
if (employee.empID === $scope.selected.empID){
console.log(employee.empID);
console.log($scope.selected.empID);
console.log("edit");
return 'edit';
}
else {
console.log("display");
console.log(employee.empID);
console.log($scope.selected.empID);
return 'display';
}
};
$scope.reset = function () {
$scope.selected = {};
console.log($scope.selected);
};
$scope.add = function(){
$scope.addEmployee();
};
$scope.editEmployee = function (employee) {
$scope.selected = angular.copy(employee);
console.log($scope.selected);
console.log(employee);
console.log($scope.selected);
};
$scope.updateEmployee = function(employee) {
$scope.employees.push({
empName : $scope.empName,
empEmail : $scope.empEmail
});
console.log($scope.employees);
$scope.getTemplate();
$scope.reset();
};
});
Here goes my html code
<body ng-controller="myCtrl">
<div>
<h3>List Employees</h3>
<table class="table table-striped table-bordered">
<thead>
<th>empID</th>
<th>Employee Name</th>
<th>Employee Email</th>
<th>Action</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">
<script type="text/ng-template" id="display">
<td>{{employee.empID}}</td>
<td>{{employee.empName}}</td>
<td>{{employee.empEmail}}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="editEmployee(employee)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="deleteEmployee(employee)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td>{{employee.empID+ 1}}</td>
<td><input type="text" ng-model=employee.empName class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empEmail class="form-control input-sm"/></td>
<td>
<button type="button" class="btn btn-primary" ng-click="updateEmployee(employee)">Save</button>
<button type="button" class="btn btn-danger" ng-click="reset()">Cancel</button>
</td>
</script>
</tr>
</tbody>
<table>
<button ng-click="add()"> Add row </button>
</div>
</body>
I am able to display my empName and empEmail but I dont know how to display empID. I have a button called addrow to create a row in the table, so when I click that button I need the empID as counted a 3,4,5,...etc like that.
Try changing your addEmployee function as below.
$scope.addEmployee = function(){
$scope.employees.push({
empId : $scope.count++,
empName : $scope.empName,
empEmail : $scope.empEmail
});
console.log($scope.employees);
};
If you are creating few sample employees, make sure you add them via addEmployee function. That way count increases automatically. However, if you want to statically create some employees, assign count correctly. cheers.
your empId is not a number, its a string
change this
empID:'1'
To this
empID:1
So your array
$scope.employees = [{empID:1,empName:'lin',empEmail:'b#1.in'},{empID:2,empName:'test',empEmail:'aaa#3.com'}];
<input type="number" ng-model="employee.empID" class="form-control input-sm"/>
to increment employeeId you can do like
<button type="button" class="btn btn-primary" ng-click="saveEmployee(employee); empId = empId+1" ng-init="empId=1">Save</button>
Current count = {{empId}}
I am using angular to load meeting information into a table. When i try to add a new row to the table, the added row does not load the last bootstrap calendar because angular hasn't yet finished loading the row when i call a function to dynamically load the datepicker. How can i call load the datepicker after Angular has finished loading the new row?
Here's my code:
<div ng-controller="virtualmeetingdetails" id="virtualmeetingdetails">
<div class="row" id="proposedaddboards">
<div class="form-group required">
<label id="adboardnumber" class="control-label col-sm-4" for="spinner1">Proposed Number of Advisory Boards</label>
<div class="col-sm-4">
<div id="spinnerDiv1" class="input-group spinner">
<asp:TextBox id="spinner1" cssclass="form-control" value="0" runat="server" />
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button" ng-click="addUser()"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="tblVirtualMeeting">
<div class="form-group required">
<div class="col-sm-12" >
<table class="table table-bordered table-striped" jq-table>
<thead style="background-color:#cad4d9">
<tr>
<th>Proposed Date</th>
<th>Virtual Meeting</th>
<th>Location City</th>
<th>State</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="meeting in meetings">
<td>
<div class="input-group input-append date" id="dtpicker{{$index}}" data-date-format="mm/dd/yyyy" style="width:150px;">
<span class="text-center" ng-show="editMode">{{meeting.proposedbegindate}}</span>
<input type="text" class="form-control col-sm-3" runat="server" ng-hide="editMode" ng-model="meeting.proposedbegindate" />
<span class="input-group-addon add-on" ng-hide="editMode">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
<td>
<select ng-model="meeting.isvirtualmeeting" ng-hide="editMode"
ng-options="option.text for option in virtualmeetingoptions track by option.value" class="form-control">
</select>
<span class="text-center" ng-show="editMode">{{meeting.isvirtualmeeting.text}}</span>
</td>
<td>
<span class="text-center" ng-show="editMode">{{meeting.venuecity}}</span>
<input type="text" class="form-control" ng-hide="editMode" ng-model="meeting.venuecity" />
</td>
<td>
<select ng-model="meeting.venuestateID" ng-hide="editMode" ng-options="state.StateConst for state in statesList track by state.StateID" class="form-control"></select>
<span class="text-center" ng-show="editMode">{{meeting.venuestateID.StateConst}}</span>
</td>
<td>
<select ng-model="meeting.venuecountryid" ng-hide="editMode" ng-options="country.CountryName for country in countriesList track by country.CountryID" class="form-control"></select>
<span class="text-center" ng-show="editMode">{{meeting.venuecountryid.CountryConst}}</span>
</td>
<td style="width:170px">
<span class="glyphicon glyphicon-pencil" style="color: green; font-size: medium; cursor: pointer" ng-show="editMode" ng-click="editMode = false; editUser(participant)"></span>
<span class="glyphicon glyphicon-floppy-save" style="color: #337ab7; font-size: medium; cursor: pointer" ng-hide="editMode" ng-click="editMode = true;saveField(meeting, <%=_CurrentUserID %>);"></span>
<span class="glyphicon glyphicon-remove-circle" style="color: red;font-size:medium;cursor:pointer" ng-click="removeItem($index)"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Controller:
app.controller("virtualmeetingdetails", function ($scope, $http) {
$http.get("../Services/EngagementDataService.asmx/GetVirtualMeetings", { params: { 'mid': getParameterByName('mid')} })
.success(function (response) {
var j = response.length;
var i = 0;
if (response.length > 0) {
while (i < j) {
response[i].proposedbegindate = moment(response[i].proposedbegindate).format("MM/DD/YYYY");
i++
}
}
....more code goes here (removed)
$scope.addUser = function () {
$scope.editing = true;
var meetingcount;
if (typeof $scope.meetings === "undefined")
meetingcount = 0
else meetingcount = $scope.meetings.length;
$scope.inserted = {
engagementproposedinfoid: 0,
id: meetingcount + 1,
venuecity: '',
proposedbegindate: '',
venuestateid: 0,
venuecountryid: 1,
isvirtualmeeting: 0
};
$scope.meetings.push($scope.inserted);
rendercalendars(meetingcount);
};
});
Function to render datepicker:
function rendercalendars(rows) {
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var j = rows;
var i = 0;
while (i < j) {
$('#dtpicker' + i).datepicker({ autoclose: true, startDate: today });
i++
}
}
The issue happens when $scope.addUser gets called... it loads the table row before the rendercalendars function gets called so the datepickers don't get loaded.
Any help will be appreciated.
My guess would be something like this:
With this line you change your scope and on your next digest cycle your repeat will be "redone". So your html gets adjusted.
$scope.meetings.push($scope.inserted);
Then you call your render function and its all messed up if the digest hit before.
rendercalendars(meetingcount);
But that's just a guess of mine.
BTW there is an angular implementation for bootstrap components (ui-boostrap) then you don't have to do jQuery stuff.
Home this is some sort of help.
How would I go about adding the capability in the form so that the user can add more input fields by clicking the "Add". This using the angular formly library.
Here is an example of the exact feature but done using only angularjs.
Adding form fields dynamically
See this Plunker
Here is an example of what you need. As you can see in the plunker, there is a TextArea which can be created dynamically on button click. The created TextAreas can also be removed with the remove button click.
See the HTML below
<div class="col-sm-10">
<input type="button" class="btn btn-info" ng-click="addNewChoice()" value="ADD QUESTION">
<div class="col-sm-4">
<fieldset data-ng-repeat="field in choiceSet.choices track by $index">
<textarea rows="4" cols="50" ng-model=" choiceSet.choices[$index]"></textarea>
<button type="button" class="btn btn-default btn-sm" ng-click="removeChoice($index)">
<span class="glyphicon glyphicon-minus"></span> REMOVE
</button>
</fieldset>
</div>
</div>
and the JS will be as below
var app = angular.module('myApp', []);
app.controller('inspectionController', function($scope, $http) {
$scope.choiceSet = {
choices: []
};
$scope.quest = {};
$scope.choiceSet.choices = [];
$scope.addNewChoice = function() {
$scope.choiceSet.choices.push('');
};
$scope.removeChoice = function(z) {
$scope.choiceSet.choices.splice(z, 1);
};
});
I put simple example.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,name){
var index = $scope.data.names.indexOf(name);
if($event.which == 1)
$scope.data.names.splice(index,1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in data.names track by $index">
<td> <input type="text" ng-model="data.names[$index].name"></td>
<td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
<td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
</tr>
</table>
<span>{{data|json}}</span>
</div>
Simple example works also deleting in any order:
http://plnkr.co/edit/c0FbjBJkHtDYRKslz0iq?p=preview
or:
some html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="oneApp" ng-controller="ctrl">
<button ng-click="addNewRow()">Add row</button>
<table>
<tr ng-repeat="row in tablerows track by $id(row)">
<td ng-model="tablerows[$index]">
<input>
</td>
<td>
<button ng-click="removeRow($index)" type="button">
Delete
</button>
<td>
</tr>
</table>
</body>
</html>
script.js:
var app = angular.module('oneApp', []);
app.controller('ctrl', function($scope){
$scope.tablerows = [];
$scope.addNewRow = function () {
var row_id;
var tablerows = $scope.tablerows;
if(tablerows.length > 0){
row_id = tablerows[tablerows.length-1];
row_id = row_id +1;
}else{
row_id = 0;
}
$scope.tablerows.push(row_id);
};
$scope.removeRow = function (index) {
$scope.tablerows.splice(index,1);
};
}
);