From the above example, Created a list and the list will be in editable mode on click edit button.
It is created using angular-xeditable.
From the list, just want to check the duplicates and show an error message if it matches.
The below code able to find the duplicates and shows an error. But, if the two or more values has the same name. the following error happens.
If the changes has done in any of them then other value of the error messages remain the same.
The error messages is not hiding on click the delete button (x).
Thanks in advance.
scripts.js
var app = angular.module('app', ['ngRoute', 'xeditable']);
app.controller('indexController', ['$scope', '$http', function ($scope, $http) {
$scope.showIcons = false;
$scope.newVal = "";
$scope.noPossValues = false;
$scope.getParamInfo = function (id) {
if (id !== undefined) {
$http.get('./getparameterbyid.json').success(function (data) {
if (data.param_values.length == 0)
$scope.noPossValues = true;
$scope.paraInfo = data;
}).error(function (err) {
console.log("Err : ", err);
});
}
};
$scope.addNewValue = function (val, id) {
$scope.paraInfo.param_values.push({
value: $scope.newVal,
default_value: null,
operation: null
});
$scope.newVal = "";
$scope.noPossValues = false;
};
$scope.updatedPossValue = function (val, index) {
var values = [];
input = val.toLowerCase();
$scope.paraInfo.param_values.map(function (item, i) {
if (val == "" && index == i) {
item.error_msg = true;
}
if (val != "" && index == i) {
item.error_msg = false;
}
if (item.operation == null)
values.push(item.value.toLowerCase());
if (index == i) {
item.value = val;
}
});
if (values.indexOf(input) > -1) {
$scope.paraInfo.param_values.map(function (item, i) {
if (item.operation == null) {
if (item.value.toLowerCase() == input) {
item.dup_item = true;
} else {
item.dup_item = false;
}
}
})
} else {
$scope.paraInfo.param_values[index].dup_item = false;
}
};
$scope.removePossVal = function (id) {
var deleteCount = 0,
nullCount = 0;
var indexOfItem = $scope.paraInfo.param_values.indexOf($scope.paraInfo.param_values[id]);
$scope.paraInfo.param_values[indexOfItem].operation = "delete";
$scope.paraInfo.param_values.map(function (item, index) {
if (item.error_msg != undefined && index == id)
delete item.error_msg;
if (item.operation == null)
nullCount += 1;
if (item.operation == "delete")
deleteCount += 1;
});
if (deleteCount == $scope.paraInfo.param_values.length) {
$scope.showIcons = true;
$scope.noPossValues = true;
}
};
$scope.enableEdit = function (action) {
if (action != 'cancel' || action != 'submit')
$scope.showIcons = !$scope.showIcons;
};
$scope.submitParameter = function () {
$scope.enableEdit();
};
$scope.editableParameter = function () {
$scope.tableform.$show();
$scope.enableEdit();
};
$scope.cancelParameter = function () {
if ($scope.showIcons == true)
$scope.enableEdit('cancel');
};
}]);
index.html
<!DOCTYPE html>
<html>
<head>
<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="http://vitalets.github.io/angular-xeditable/starter/angular-xeditable/css/xeditable.css" rel="stylesheet">
<!-- scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js">
</script>
<script src="http://vitalets.github.io/angular-xeditable/starter/angular-xeditable/js/xeditable.js">
</script>
<script src="script.js">
</script>
</head>
<body ng-app="app" ng-controller="indexController">
<div class="container mt-5">
<form action="" editable-form name="tableform" onaftersave="submitParameter()" oncancel="cancelParameter()">
<div ng-init="getParamInfo('10')">
<button type="button" class="btn btn-primary pull-right cur-point mb-3" ng-show="!tableform.$visible"
ng-click="editableParameter()">
<i class="fa fa-pencil"></i> Edit Fields
</button>
<div class="form-group row text-center">
<label for="colFormLabel" class="col-sm-5 m-1 col-form-label">Possible Values : </label>
<div class="col-sm-6">
<div style="display: flex;">
<div class="card" style="width: 70%; min-height: 2.5rem; margin: 0 auto;" ng-hide="noPossValues">
<ul class="list-group list-group-flush" ng-repeat="(index, pv) in paraInfo.param_values">
<li style="padding: 0.44rem;" class="list-group-item" ng-show="!showIcons && pv.value != undefined && pv.operation != 'delete'">{{pv.value}}</li>
<div class="input-group" ng-show="showIcons && pv.value != undefined && pv.operation != 'delete'">
<input type="text" class="form-control rounded-0" ng-class="updateVal == '' ? 'has-error no-border-color' : ''"
ng-value="pv.value" ng-model="updateVal" ng-change="updatedPossValue(updateVal, index)">
<span class="input-group-btn" style="border-bottom: 2px solid rgba(0,0,0,.15);"
ng-class="updateVal == '' ? 'has-error' : ''">
<a class="btn btn-danger rounded-0 cur-pointer text-white" ng-click="removePossVal(index)">
<i class="fa fa-remove"></i>
</a>
</span>
</div>
<span class="text-danger text-left" ng-show="pv.error_msg">No empty values</span>
<span class="text-danger param-poss-values" ng-show="pv.dup_item">No duplicate values</span>
</ul>
</div>
<div ng-show="noPossValues && showIcons" class="d-flex">
<input type="text" class="form-control add-new-inp-txt" ng-model="newVal" placeholder="Add new...">
<button class="btn btn-info cur-pointer text-white add-new-btn" ng-click="addNewValue(newVal)"
ng-disabled="newVal == ''">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="form-group row" ng-show="showIcons && paraInfo.param_values.length > 0 && !noPossValues">
<label for="colFormLabel" class="col-sm-5 m-1 col-form-label : "></label>
<div class="col-sm-6 text-center">
<div style="display: flex; width: 70%; margin-left: 15%;">
<input type="text" name="pincode" ng-pattern="patternValueBox" class="form-control add-new-inp-txt"
ng-model="newVal" ng-change="checkDuplicateValue(newVal)" placeholder="Add new...">
<button class="btn btn-info cur-pointer text-white add-new-btn" ng-click="addNewValue(newVal)"
ng-disabled="newVal == '' || duplicateValue">
<i class="fa fa-plus"></i>
</button>
<span class="text-danger param-poss-values" ng-show="duplicateValue">No duplicate
values</span>
</div>
</div>
</div>
<div class="text-center mt-5 row" ng-show="tableform.$visible">
<div class="col-md-4">
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-outline-secondary mr-3 cur-point">Cancel</button>
</div>
<div class="col-md-4">
<button type="submit" class="col-sm-7 btn btn-outline-success mr-3 ml-3 cur-point" ng-disabled="updateVal == ''">Submit{{updateVal}}</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
def FindDuplicates(in_list):
unique = set(in_list)
for each in unique:
count = in_list.count(each)
if count > 1:
print 'There are duplicates in this list'
return True
print 'There are no duplicates in this list'
return False
if name == 'main':