I have one table in that am trying to do following functions:
Initially one empty row and add button will be there.
When I click add button after entering details in first row, new row should be added and the first row value also should be displayed.
My code below:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope, $http, $timeout) {
$scope.addContactDetail = function () {
$scope.contactDetails = {
email: $scope.contactDetail.email,
bolId: $scope.contactDetail.billId
};
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
<tr>
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addDetail()">
<span>ADD</span>
</div>
</div>
</body>
When I click add button after entering data in first row, 3 new rows are being added before the first row. What's wrong?
You have 3 new rows added, since you are adding 3 properties to the $scope.contactDetails object and ngRepeat iterates over them. You simply can have an array of contactDetails and add new item to this array in your addContactDetail method, like this:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope) {
//first row initially empty
$scope.contactDetails = [{}];
$scope.addContactDetail = function () {
//add more empty rows
$scope.contactDetails.push({});
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
padding-bottom: 10px;
border-style: solid;
border-color: #b3b3b3;
border-width: 0px 1px 1px 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="{{contactDetail.bolId + 'Bol'}}"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="{{contactDetail.bolId + 'Bol'}}">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addContactDetail()">
<span>ADD</span>
</div>
</div>
</body>
Related
i created directive for making print page.this directive have template page that included button and print template(this have ngRepeat on Result object).print button was clicked fire "click" funciton in Controller of directive then ajax request send to server for get array of object that fill print tamplate.
Mainpage.html
<div ng-class="{'btn':true,'btn-warning':true,'disabled':disableBtn}" data-toggle="modal"
ng-click="getdetail=true;" data-target="#detailModal">order detail</div>
<print-order disable-btn="disableBtn" order="selectedItem"></print-order>
print.template.html
<a ng-click="ctrl.click()" ng-class="{'btn':true,'btn-info':true,'disabled':ctrl.disableBtn}" >
print
<i class="fa fa-print"></i>
</a>
<div id="printSection">
<table style="width: 100%;font:13px tahoma;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="border-bottom: 3px solid black;">
<p>number: </p>
{{ctrl.order.fldTracking}}
</th>
<th>
<img src="/images/receipt-logo.png" alt="">
</th>
<th style="border-bottom: 3px solid black;">
<p>code :</p>
<p> {{ctrl.order.customer.fldMobilePhone}}
<br> {{ctrl.order.fldAtFA.split("-")[0]}}
</p>
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 3px solid black;">
<td colspan="3" style="padding: 10px;line-height: 20px;">
cutomer : {{ctrl.order.customerAddress.fldContactName }}
<br /> address: {{ctrl.order.customerAddress.fldAddress }}
<br/>mobile : {{ctrl.order.customerAddress.fldMobilePhone}}
<br/> phone : {{ctrl.order.customerAddress.fldTelephone}} </td>
</tr>
</tbody>
</table>
<h1>{{ctrl.title}}</h1>
<table dir="rtl" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:20px;border-top:2px solid #000000;;border-bottom:2px solid #000000;border-color: #000000">
<tbody>
<tr>
<td width="40%" style="padding-right:10px;font-size: 10px" align="right">name</td>
<td width="20%" style="font-size: 10px" align="center">number</td>
<td width="20%" style="font-size: 10px" align="center">price</td>
<td width="25%" style="font-size: 10px" align="right">price</td>
</tr>
<tr ng-repeat="item in ctrl.Components track by $index">
<td style="padding-right:10px;font-size: 9px">
{{item.offer.fldTitle}}<br>
</td>
<td style="font-size: 12px" align="center">{{item.fldQty}}</td>
<td style="font-size: 10px" align="center">{{item.fldUnitPrice}}</td>
<td style="font-size: 10px;padding: 5px">{{item.fldTotalPrice}}</td>
</tr>
</tbody>
</table>
</div>
printdirective.js
myApp.directive("printOrder",["$window","orderService","$timeout","$compile",function($windows,orderService,$timeout,$compile){
return{
restrict:"AE",
bindToController:{
disableBtn:"=",
order:"="
},
templateUrl:"/Widgets/printOrder.template.html",
transclude: true,
scope:true,
controllerAs:"ctrl",
controller:function(){
this.click=function(){
var popupWinindow =$windows.open("", '_blank', 'width=300,height=500');
orderService.getOrderDetail(this.order.id)
.then(function(result){
this.Components=result;
popupWinindow.document.open();
var el=angular.element("#printSection")
$compile(el)(this);
$timeout(function(){
// console.log(el.html());
popupWinindow.document.write(
`<html>
<head></head>
<body style="direction: rtl;">`+el.html()+` </body>
</html>`);
popupWinindow.document.close();
},500)
});
}
},
}
}])
when i clicked on print button .id of order send to directive then detail of order request of server with ajax that this should fill "#printSection" of template by $compile but this dont binding and Components property is empty.
but this dont binding and Components property is empty.
You cannot call $compile with this, in your case $compile(el)(this);
this != scope
Use:
controller:function($scope){
$compile(el)($scope);
}
Small Demo
Is it typo? var el=angular.element("#printSection")
Did you mean something like:
var warapper = document.querySelector('#printSection');
angular.element(warapper); //...
I would like to expand on a WC3 angular tutorial that goes to the database and gets format a resultset to display into a table on the screen. The tutorial is here: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_sql
What I want to add is an input box that allows me to enter starting letters to be used in the sql lookup query in the asp page. So I will pass what's in the textbox to the sql to then refresh the table results with only the words beginning with those characters entered:
Here is my code and I can't figure out how to wire up the input field to refresh the table. $Scope.myWord doesn't work. Can anyone help?
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="myApp" style="margin: 20px;">
<h4>Add Hangman Word</h4>
<form method='post' action='modify.asp' name='theForm' id='theForm' onsubmit="return vForm();">
<div ng-controller="wordsCtrl">
<input type='hidden' name='addhangmanword' value='1' />
<b>Add word:</b><br />
<input class="form-control" style='width:250px;' ng-model="myWord" name="word" id="word" type="text" /><br />
<input class="btn" style="border: 1px solid black; display: inline;" type='submit' value='Submit' />
<br /><br />
<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
var strBegin = $scope.myWord;
if (strBegin != "") {
ajaxURL = ajaxURL + "?w=" + strBegin;
}
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});
</script>
</body>
</html>
Update portion of the code that fixed the issue:
<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter: myWord">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});
</script>
I would like to know how to select the child checkboxes when parent checkbox is selected. In the below plunkr i have parent checkbox in table head and child checkboxes in table body. On click of parent checkbox in table head i want all the child checkboxes in table body to be selected and when all the child checkboxes in table body are selected parent checkbox in table head also should be selected. Here is the plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview
html code-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app="test" ng-controller="test">
<table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
<thead style="border-bottom: 1px solid #AAA">
<tr>
<th style="width:50%"> <input type='checkbox'/> catalog</th>
<th style="width:25%">currentVersion</th>
<th style="width:25%">new Version</th>
</tr>
</thead>
<tbody style="color: #007db8;">
<tr ng-repeat="item in items" ng-attr-id="item.id">
<td style="width:50%">
<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/> {{ item.catalog }}
</td>
<td style="width:25%">{{ item.currentVersion }}</td>
<td style="width:25%">{{ item.newVersion }}</td>
</tr>
</tbody>
</table>
<button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()" >Update</button>
</body>
Here you go:
angular.module('test', [])
.controller('test', function($scope) {
$scope.selectAll = false;
$scope.itemSelecteds = {};
$scope.dummyModel = {};
$scope.items = [{
id: '1',
name: 'mit',
catalog: 'Multiple',
currentVersion: '1.2',
newVersion: '1.3',
}, {
id: '2',
name: 'mit',
catalog: 'Multiple',
currentVersion: '1.2',
newVersion: '1.3',
}, {
id: '3',
name: 'mit',
catalog: 'Multiple',
currentVersion: '1.2',
newVersion: '1.3',
}];
$scope.selectAllItem = function() {
// Delete the selection
$scope.dummyModel = {};
$scope.itemSelecteds = {};
// If select all checkbox is checked, then mark all items as selected
if ($scope.selectAll) {
angular.forEach($scope.items, function(item) {
this[item.id] = angular.copy(item);
$scope.dummyModel[item.id] = true;
}, $scope.itemSelecteds);
}
};
$scope.selectItem = function(item) {
// If checkbox is checked
if ($scope.dummyModel[item.id]) {
$scope.itemSelecteds[item.id] = item;
} else {
delete $scope.itemSelecteds[item.id];
}
// If all items are selected, mark selectAll as true
$scope.selectAll = ((Object.keys($scope.itemSelecteds)).length === $scope.items.length);
}
$scope.update = function() {
console.log($scope.itemSelecteds);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="test">
<table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
<thead style="border-bottom: 1px solid #AAA">
<tr>
<th style="width:50%">
<input type='checkbox' ng-model='selectAll' ng-change='selectAllItem()' /> catalog</th>
<th style="width:25%">currentVersion</th>
<th style="width:25%">new Version</th>
</tr>
</thead>
<tbody style="color: #007db8;">
<tr ng-repeat="item in items" ng-attr-id="item.id">
<td style="width:50%">
<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)" /> {{ item.catalog }}
</td>
<td style="width:25%">{{ item.currentVersion }}</td>
<td style="width:25%">{{ item.newVersion }}</td>
</tr>
</tbody>
</table>
<button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()">Update</button>
</body>
I have the following code where i'm trying to filter on the product array by checking a checkbox,but in my case list is not filtered click on the checkbox,i have set the value of city in the value of the checkbox,but list is not filtered?
//here we create the product array and display the array in the HTML page.
var app=angular.module("myApp",[]);
app.controller("myCont",function($scope){
var product = [
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"},
{pid:"103",ename:"Selena",esalary:"35000",ecity:"England"},
{pid:"102",ename:"Lokesh",esalary:"32500",ecity:"Malwa"},
{pid:"108",ename:"Gotm",esalary:"8910",ecity:"Ujain"},
{pid:"106",ename:"Soni",esalary:"16000",ecity:"bhopal"},
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"}
]
$scope.products=product;
});
<html>
<head>
<script src="angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="controller.js"></script>
</head>
<style>
#count
{
color: blue;
}
#search
{
background-color: LightBlue;
}
</style>
<div class="funkyradio">
<div class="funkyradio-default">
<input type="checkbox" Agar/>
<label for="checkbox1">First Option default</label>
</div>
<div class="funkyradio-primary">
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value="'US'" data-ng-false-value=''/>US
<label for="checkbox2">Second Option primary</label>
</div>
</div>
</div>
<body ng-app="myApp" ng-controller="myCont">
<form align="center">
//Search tab for all array
Search Here<input type="text" name="uname"
ng-model="search" placeholder=" Enter data">
Hide Salary <input type="checkbox" ng-model="hideSalary">
<table class="table table-hover" align="center" border="2">
<thead id="search">
<tr>
<th>pid</th>
<th>ename</th>
<th ng-hide="hideSalary">esalary</th>
<th>
ecity
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered = (products | filter:search) | filter:search.type1 | orderBy:'ename'">
<td>{{x.pid}}</td>
<td>{{x.ename | uppercase}}</td>
<td ng-hide="hideSalary">{{x.esalary }}</td>
<td>{{x.ecity}}</td>
</tr>
</tbody>
</table>
<span id="count">
<hr>
Filtered list has {{filtered.length}} items
</span>
</form>
</body>
</html>
I am New For Angular-js Please Heip On Coding With Dynamic Table Creation .I added Some Records Helping With Json Ang ng-model but How To Remove Current Record When Click On Remove Button.
Passing With This Operator.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.emplist = [
{empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'},
{empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'},
{empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'},
{empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'},
{empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'},
{empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'},
{empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'},
{empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'},
{empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'},
{empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'}
];
$scope.addItem = function(){
$scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid});
$scope.empname = '';
$scope.empsalary = '';
$scope.empid = '';
}
$scope.remItem = function(x){
$scope.emplist.splice(x,1);
}
});
body{
font-size: 14px;
font-family: Arial;
color:#333;
}
<!DOCTYPE Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table style="width:100%;">
<tr height="25" style=" background: #99ff00;">
<th width="5%"></th>
<th width="40%">EMP Name</th>
<th width="30%">EMP Salary</th>
<th width="25%">EMP ID</th>
</tr>
<tr height="25" ng-repeat="x in emplist">
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{$index}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{$index}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{x.empname}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{x.empname}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empsalary}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empsalary}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
</tr>
<tr height="25">
<td><button ng-click="addItem();" style="background: #00ffff; border:0px; width:100%; height:100%;">Add</button></td>
<td style="padding:2px;"><input type="text" ng-model="empname" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empsalary" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empid" style="width:100%;" ></td>
</tr>
</table>
</div>
</body>
</html>
Instead of showing the table row for each record, use ng-repeat
<tr ng-repeat="emp in emplist">
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td><button ng-click="remItem($index)">Remove</button></td>
And inside the controller directly you can get the $index
$scope.remItem = function(itemIndex){
$scope.emplist.splice(itemIndex,1);
}
Please Pass Current Index in your function
<button ng-click="remItem(x,$index);" > Remove</button>
$scope.remItem = function(x,index){
$scope.emplist.splice(index,1);
}
It will help you !!!
Try this
<button ng-click="remItem(x);" > Remove</button>
and in controller
$scope.remItem = function(item){
var index = $scope.emplist.indexOf(item);
$scope.emplist.splice(index,1);
}
**You can delete the row based on index **
<button title="Remove" ng-click="removeFile($index)"></button>
$scope.removeFile = function (index) {
if (!confirm("Are you sure you want to remove?")) {
return;
}
$scope.emplist.splice(index, 1);}