How to create a dynamic table row using angular js

attribute.html

Attribute Value Language Position Add Option
Remove

controller.js

app.controller('attributeCtrl', function($scope, $http) {
	$scope.title = "New Attribute";
	$scope.detTitle = "Add attribute details";
	$scope.addValueSelected = true;
	$scope.attributeList = [];
	$scope.attributeValueList = [];
	$scope.valueEntered = true;
	$scope.attributeGroup=['Bangle','Chain','Ring'];
	//$scope.count = 0;
	$scope.valueCount =['juhi'];
	$scope.counter = 1;
	$scope.aValue = {name:"", group:"", values:[]};

    	
	$scope.addValueRow = function(){
		$scope.valueCount.push('juhi '+ $scope.counter);
    	$scope.counter++;
   	};
	$scope.removeFromList = function(id){
		$scope.valueCount.pop('juhi '+id);
		$scope.aValue.values.pop(id);
	};
});

AngularJS example for associative arrays

<html ng-app>
<head>
<script src="libs/angular.js"></script>
<script>
function myController($scope){
$scope.employee=[{"name":"ajith","job":"manager","salary":"$2000"},    {"name":"manoj","job":"clerk","salary":"$1000"}    ]    ;
}
</script>
</head>
<body ng-controller="myController">
<h2>List Example</h2>
<table>
<tr>
<td>Name</td>
<td>Job</td>
<td>Salary</td>
</tr>

<tr>
<td>{{employee[0].name}}</td>
<td>{{employee[0].job}}</td>
<td>{{employee[0].salary}}</td>
</tr>

<tr>
<td>{{employee[1].name}}</td>
<td>{{employee[1].job}}</td>
<td>{{employee[1].salary}}</td>
</tr>


</table>
<p>{{employee.name}}</p>
</body>
</html>

AngularJS example for handling form with elements

<html ng-app>
<head>
<script src="libs/angular.js"></script>
<script>
function formController($scope){
$scope.total=0;
$scope.num1=0;
$scope.num2=0;
$scope.calculate = function(){
$scope.total = parseInt($scope.num1) + parseInt($scope.num2);
}

}
</script>
</head>
<body ng-controller="formController">
<form>
<table>
<tr>
<td>Enter Number1</td><td>:<input ng-model="num1" ng-change="calculate()"/></td>
</tr>
<tr>
<td>Enter Number2</td><td>:<input ng-model="num2" ng-change="calculate()" /></td>
</tr>
</table>
<button
ng-click="calculate()">Calculate</button>
</form>
<p>{{total}}</p>
</body>
</html>

AngularJS script for handling textbox change event

<html ng-app>
<head>
<script src="libs/angular.js"></script>
<script>
function formController($scope){
$scope.empName="Rajeev";
$scope.changeName = function(){
$scope.empName="ARJUN";
}

}
</script>
</head>
<body ng-controller="formController">
<form>
<table>
<tr>
<td>Name</td><td>:<input ng-model="empName" ng-change="hello()" /></td>
</tr>
</table>
<button ng-click="changeName()">{{empName}}</button>
</form>
</body>
</html>

AngularJS example script for using objects

<html ng-app>
<head>
<script src="libs/angular.js"></script>
<script>
function myController($scope){
var person={};
person.name="James";
person.age="32";
person.salary="35000";

$scope.person = person;
}
</script>
</head>
<body ng-controller="myController">
<table>
<tr>
<td>Name</td><td>:{{person.name}}</td>
</tr>
<tr>
<td>Age</td><td>:{{person.age}}</td>
</tr>
<tr>
<td>Salary</td><td>:{{person.salary}}</td>
</tr>
</body>
</html>

jQuery Mobile Scroll Events

jQuery Mobile provides two scroll events: when scrolling starts and when scrolling stops.


jQuery Mobile Scrollstart
The scrollstart event is triggered when the user starts to scroll the page:
$(document).on("scrollstart",function(){
  alert("Started scrolling!");
});

jQuery Mobile Scrollstop
The scrollstop event is triggered when the user stops to scroll the page:
$(document).on("scrollstop",function(){
  alert("Stopped scrolling!");
});

jQuery Mobile Touch Events – Tap and Taphold

jQuery Mobile Tap
The tap event is triggered when the user taps on an element.
The following example says: When a tap event fires on a

element; hide the current

element:
$(“p”).on(“tap”,function(){
  $(this).hide();
});

jQuery Mobile Taphold
The taphold event is triggered when the user taps on an element and hold for one second:
$(“p”).on(“taphold”,function(){
  $(this).hide();
});