Hi,
I have 2 fields Name,Category
I am going to add n no Rows
For each row i have edit button
after clicking of edit button it can open the relevant values on the form
Currently my requirement is i need to do validation in edit form aslo
If everything is valid on edip popup need to display updated alert message or else display validation messages
@{
Layout = null;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.directive("select2", function ($timeout, $parse) {
return {
restrict// Code goes here
: 'AC',
require: 'ngModel',
link: function (scope, element, attrs) {
console.log(attrs);
$timeout(function () {
element.select2();
element.select2Initialized = true;
});
var refreshSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.trigger('change');
});
};
var recreateSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.select2('destroy');
element.select2();
});
};
scope.$watch(attrs.ngModel, refreshSelect);
if (attrs.ngOptions) {
var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
// watch for option list change
scope.$watch(list, recreateSelect);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refreshSelect);
}
}
};
});
app.controller('MyController', function ($scope, $window) {
$scope.EditCustomer;
$scope.EditIndex;
$scope.Customers = [];
$scope.Orders = [];
$scope.categories = [{ CategoryID: 1, CategortName: 'Starbuck' },
{ CategoryID: 2, CategortName: 'Appolo' },
{ CategoryID: 3, CategortName: 'Saul Tigh' },
{ CategoryID: 4, CategortName: 'Adama'}]
$scope.Add = function (isValid) {
debugger;
if (isValid) {
var customer = {};
customer.Name = $scope.Name;
customer.Category = $scope.Category.CategortName;
$scope.Customers.push(customer);
$scope.Name = "";
$scope.Category = "";
$scope.Date = "";
$scope.userForm1.$setPristine();
}
else {
// Show error Message if Form not valid.
if ($scope.userForm1.$error.required != undefined) {
for (var i = 0; i < $scope.userForm1.$error.required.length; i++) {
$scope.userForm1.$error.required[i].$pristine = false;
}
}
}
};
$scope.Remove = function (index) {
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
$scope.Customers.splice(index, 1);
}
}
//$scope.Change = function () {
// $scope.EditCustomer.Category = $scope.CategorySelection.CategortName;
//}
$scope.edit = function (index) {
$scope.EditCustomer = $scope.Customers[index];
$scope.Name = $scope.EditCustomer.Name;
$scope.Category = $scope.EditCustomer.Category;
$scope.EditIndex = index;
var index;
for (var i = 0; i < $scope.categories.length; i++) {
if ($scope.categories[i].CategortName == $scope.EditCustomer.Category) {
index = i;
}
}
$scope.CategorySelection = $scope.categories[index];
}
$scope.Update = function (index) {
if (isValid) {
alert("Updated")
$scope.EditCustomer.Name = $scope.Name;
$scope.EditCustomer.Category = $scope.CategorySelection.CategortName;
//$scope.EditCustomer.Category = $scope.Category.CategortName;
$scope.Customers[index] = $scope.EditCustomer;
$scope.Name = "";
$scope.Category = "";
}
else {
// Show error Message if Form not valid.
if ($scope.userForm1.$error.required != undefined) {
for (var i = 0; i < $scope.userForm1.$error.required.length; i++) {
$scope.userForm1.$error.required[i].$pristine = false;
}
}
}
}
$scope.reset = function () {
$scope.Name = "";
$scope.Category = "";
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<form name="userForm1" novalidate>
<table cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
<th>Category</th>
<th></th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Name}}</td>
<td>{{m.Category}}</td>
<td>
<input type="button" ng-click="edit($index)" class="btn btn-sm btn-primary" data-toggle="modal"
data-target="#popup2" value="edit" />
</td>
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="text" ng-model="Name" name="Name" required />
<p style="color: red" ng-show="userForm1.Name.$error.required && !userForm1.Name.$pristine"
class="help-block">
Name is required.</p>
</td>
<td>
<select class="input-sm form-control" select2="" name="Category" ng-model="Category"
containercssclass="all" ng-change="GetProducts()" ng-options="c as c.CategortName for c in categories"
ng-disabled="disabled" required>
<option value="">Select Category</option>
</select>
<p style="color: red" ng-show="userForm1.Category.$error.required && !userForm1.Category.$pristine"
class="help-block">Category is required.</p>
</td>
<td><input type="button" ng-click="Add(userForm1.$valid)" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="modal fade" id="popup2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="s2vk-container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default" ng-model="EditCustomer">
<table class="table table-condensed">
<thead>
<tr style="padding-left: 10px; padding-right: 10px;" class="active">
<th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">Name</th>
<th style="pa dding-left: 10px; padding-right: 10px;" class="thick-line">Category</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">Action</th>
</tr>
<tr>
<td><input type="text" value="{{EditCustomer.Name}}" ng-model="Name" /></td>
<td>
<select class="input-sm form-control" select2="" name="CategorySelection" ng-model="CategorySelection"
ng-change="Change()" value="{{EditCustomer.Category}}" containercssclass="all"
ng-options="c as c.CategortName for c in categories" ng-disabled="disabled" >
<option value="">Select Category</option>
</select>
</td>
<td>
<button type="button" class="btn btn-sm btn-primary" ng-click="Update(userForm1.$valid)">Update</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="reset()">cancel</button>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
