从列表中检查重复项并显示错误信息

时间:2018-10-22 08:10:40

标签: javascript html angularjs angular-xeditable

Plunkr

在上面的示例中,创建了一个列表,然后单击 edit 按钮,该列表将处于可编辑模式。

它是使用 angular-xeditable 创建的。

从列表中,只想检查重复项,如果匹配则显示错误消息。

以下代码能够找到重复项并显示错误。但是,如果两个或多个值具有相同的名称。发生以下错误。

  1. 如果其中任何一个完成更改,则错误的其他值 消息保持不变。

  2. 单击删除按钮( x )不会隐藏错误消息。

谢谢。

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>

1 个答案:

答案 0 :(得分:0)

def FindDuplicates(in_list):
    唯一=设置(in_list)
    每个都有唯一性:
        count = in_list.count(每个)
        如果计数> 1:
            打印“此列表中有重复项”
            返回True
    打印“此列表中没有重复项”
    返回False

如果名称 =='主要':

# test it  
a = [8, 64, 16, 32, 4, 24]  
b = [2,2,3,6,78,65,4,4,5]  

FindDuplicates(a)  
FindDuplicates(b)