从上面的示例中，创建了一个列表，单击编辑按钮后该列表将处于可编辑模式。
它是使用angular-xeditable创建的。
从列表中，只想检查重复项并在匹配时显示错误消息。
下面的代码能够找到重复项并显示错误。但是，如果两个或多个值具有相同的名称。发生以下错误。
如果其中任何一个发生了更改，则错误消息的其他值保持不变。
单击删除按钮 ( x ) 时错误消息不会隐藏。
提前致谢。
脚本.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');
};
}]);
索引.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>