Hi,
we have Name and Category Fields. after clicking of edit functionality in the below code one pop up shoule be appear
In that Name and Category Fields are displaying
Name value is displaying propely but category value is showing empty
I want to display relevant row category name on that pop up
Update is working fine.
Problem is after clciking of edit func() value is not displaying on Category
Please help me
<html>
<head>
<title></title>
</head>
<body>
<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 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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script 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 () {
//Add the new item to the Array.
var customer = {};
customer.Name = $scope.Name;
customer.Category = $scope.Category.CategortName;
$scope.Customers.push(customer);
//Clear the TextBoxes.
$scope.Name = "";
$scope.Category = "";
$scope.Date = "";
};
$scope.Remove = function (index) {
//Find the record using Index from Array.
var name = $scope.Customers[index].Name;
if ($window.confirm("Do you want to delete: " + name)) {
//Remove the item from Array using Index.
$scope.Customers.splice(index, 1);
}
}
$scope.edit = function (index) {
$scope.EditCustomer = $scope.Customers[index];
$scope.Name = $scope.EditCustomer.Name;
$scope.Category= $scope.EditCustomer.Category;
$scope.EditIndex = index;
alert($scope.EditCustomer);
}
$scope.Update = function (index) {
alert("updated");
//Find the record using Index from Array.
$scope.EditCustomer.Name = $scope.Name;
$scope.EditCustomer.Category = $scope.Category.CategortName;
$scope.Customers[index] = $scope.EditCustomer;
alert($scope.EditCustomer);
$scope.Name = "";
$scope.Category = "";
}
$scope.reset = function () {
$scope.Name = "";
$scope.Category = "";
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<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" /></td>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts()" ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</td>
<td><input type="button" ng-click="Add()" 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="padding-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="CategortName" ng-model="Category" 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()">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>
</div>
</body>
</html>
