Skip to content

Instantly share code, notes, and snippets.

@karkranikhil

karkranikhil/workpending

Last active August 29, 2015 14:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save karkranikhil/1a5669a7bbb0bb147eeb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save karkranikhil/1a5669a7bbb0bb147eeb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
workpending
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<title>Email Notification</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script>
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [
{ 'email':'abc@xyz.com','Notify':'All'
},
{ 'email':'xyza@abc.com','Notify':'Collection Initiate'
},
{ 'email':'qwe@rty.com','Notify':'Collection Failed'
},
];
$scope.datas=[
{'Notify':'All'},
{'Notify':'Collection Initiate'},
{'Notify':'No Data Found'},
{'Notify':'Collection Failed'},
{'Notify':'Collection Success'}
];
$scope.myData = $scope.datas[0];
$scope.addRow = function(){
var arr = [];
$.each($scope.myData, function(k,v){
alert(arr.length);
arr[arr.length] = v.Notify;
});
//$scope.companies.push({ 'email':$scope.email, 'Notify': });
$scope.companies.push({ 'email':$scope.email, 'Notify':arr[0]});
$scope.email='';
$scope.myData='';
};
$scope.removeRow = function(email){
var index = -1;
var comArr = eval( $scope.companies );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].email === email ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.companies.splice( index, 1 );
};
});
</script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
<div class="container">
<div>
<form class="class="form-inline"" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label" style="color:blue;font-weight: bold;">Email Id</label>
<div class="col-md-4">
<input type="email" class="form-control" name="email"
ng-model="email" />
</div>
</div>
<div class="form-group">
<div class="col-md-1">
<button type="submit" class="btn btn-primary " Style="border-radius:25px;">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" style="color:blue;font-weight: bold;">Notify On</label>
<div class="col-md-3">
<select ng-model="myData" class="form-control" multiple ng-options="data.Notify for data in datas" style="height: 100px;"></select>
</div>
</div>
</form>
<div>
<br><br>
<br>
<br><br><br>
<br>
<br>
<div class="row" ng-repeat="company in companies" style=" height: 60px;">
<div class="col-sm-1"><button type="submit" class="btn btn-primary " Style="border-radius:25px;" ng-click="removeRow(company.email)">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ng-click="removeRow(company.email)"></span></button>
</div>
<div class="col-sm-2" style="color:blue;font-weight: bold;"> Email ID to be notified</div>
<div class="col-sm-4"><input class="form-control" value="{{company.email}}"></input></div>
<div class="col-sm-2" style="color:blue;font-weight: bold;">Notify on</div>
<div class="col-sm-3">
<select class="form-control">
<option> {{company.Notify}}<br/> </option>
</select>
</div>
</div>
</div>
</body>
</html>
@karkranikhil

karkranikhil commented Jul 10, 2015

Copy link
Copy Markdown
Author
<title>Hello AngularJS - Add Table Row Dynamically</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script> <script> var helloApp = angular.module("helloApp", []); helloApp.controller("CompanyCtrl", function($scope) { $scope.companies = [ { 'email':'karkra.nikhil@gmail.com','Notify':'All' }, { 'email':'nikhil_karkra@infosys.com','Notify':'All' }, ]; $scope.datas=[ {'Notify':'All'}, {'Notify':'Collection Initiate'}, {'Notify':'No Data Found'}, {'Notify':'Collection Failed'}, {'Notify':'Collection Success'} ]; $scope.myData = $scope.datas[0]; $scope.addRow = function(){ $scope.companies.push({ 'email':$scope.email, 'Notify': $scope.myData.Notify }); $scope.email=''; $scope.myData=''; }; }); </script>
Email Id
Notify On 
<select ng-model="myData" ng-options="data.Notify for data in datas"></select>

    </div>
</div>
<div class="form-group">                                
    <div style="padding-left:110px">
        <input type="submit" value="Submit" class="btn btn-primary"/>
    </div>
</div>
Name
{{company.email}} {{company.Notify}}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment