Question

我对angularsJs有问题，我有一个dropdown-multiselect，其中包含带标签的复选框按钮，当我点击检查时，标签会添加到表格中，现在，我想删除表中的一行，所以我必须单击（supprimer）按钮（在表中），我需要在同一时间检查将取消检查，我不知道如何继续请有人帮助我

这是我的popup.html页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/angular.js"></script>
    <script src="js/angular-resource.js"></script>
    <script src="js/angular-route.js"></script> 
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.0/lodash.min.js"></script>
    <script src="js/MyApp.js"></script> 
    <link href="font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body >

<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-dropdown-multiselect="" options="example14data" selected-model="example14model" checkboxes="true" extra-settings="example14settings"></div> 

    <form class="form-inline" role="form" style="margin-left: 300px;">
      <div class="form-group">
        <input type="text" size="30" placeholder=" other subject" class="form-control" ng-model="otherSubject" />
      </div>

      <div class="form-group">
        <button class="btn btn-default" ng-click="ajouteSubject(otherSubject)" >Ajouter</button>
        <button ng-click="supprimer()"> <a><i class="fa fa-remove" ng-click="supprimer()"></i></a>supprimer</button>
      </div>
    </form><br>

        <table class="table table-responsive table-bordered" style="width:400px; margin-left: 300px;">
            <thead>
                <tr>

                    <th>Subject Name</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="pref in example14model">

                    <td>{{pref.label}}</td>
                    <td> <input type="checkbox" ng-model="pref.isDelete"/> {{$index}}</td>
                </tr>
            </tbody>
        </table>  

        <br><br>

        <pre>Selected Subject: {{example14model}} | </pre>
</div>

</body>
</html>

和我的控制器myApp.js

'use strict';
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller('AppCtrl', function ($scope) {
    $scope.example14model = [];
    $scope.example14settings = {
        scrollableWidth: '400px',
        scrollableHeight: '200px',
        scrollable: true,
        enableSearch: true
    };
    $scope.example14data = [

        { "label": "JAVA", "id": "1" }, 
        { "label": "C++",  "id": "2" }, 
        { "label": "JSON", "id": "3" }, 
        { "label": "DotNet", "id": "4"}, 
        {"label": "AKKA", "id": "5"}
    ];


    $scope.example2settings = {
        displayProp: 'label'
    };


    $scope.ajouteSubject = function (otherSubject) {
        $scope.example14data.push({
            label: otherSubject,                
            checked: false
        })
    };

$scope.supprimer= function (){
        var example14dataNew= [];
        angulars.forEach($scope.example14data, function(v){
            if (!v.isDelete){
                example14dataNew.push(v);
            }
             $scope.example14data= example14dataNew;
        } )
    };


$scope.sessions = [{
  id: 0

}];

});

var directiveModule = angular.module('angularjs-dropdown-multiselect', []);

directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$compile', '$parse',

function ($filter, $document, $compile, $parse) {

return {
    restrict: 'AE',
    scope: {
        selectedModel: '=',
        options: '=',
        extraSettings: '=',
        events: '=',
        searchFilter: '=?',
        translationTexts: '=',
        groupBy: '@'
    },
    template: function (element, attrs) {
        var checkboxes = attrs.checkboxes ? true : false;
        var groups = attrs.groupBy ? true : false;

        var template = '<div class="multiselect-parent btn-group dropdown-multiselect" style="width: 300px">';
        template += '<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}&nbsp;<span class="caret"></span></button>';
        template += '<ul class="dropdown-menu dropdown-menu-form" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: scroll" >';
        template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a data-ng-click="selectAll()"><i class="fa fa-check"></i>  {{texts.checkAll}}</a>';
        template += '<li ng-show="settings.showUncheckAll"><a data-ng-click="deselectAll();"><i class="fa fa-remove"></i>   {{texts.uncheckAll}}</a></li>';
        template += '<li ng-hide="(!settings.showCheckAll || settings.selectionLimit > 0) && !settings.showUncheckAll" class="divider"></li>';
        template += '<li ng-show="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control" style="width: 100%;" ng-model="searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
        template += '<li ng-show="settings.enableSearch" class="divider"></li>';

        if (groups) {
            template += '<li ng-repeat-start="option in orderedItems | filter: searchFilter" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
            template += '<li ng-repeat-end role="presentation">';
        } else {
            template += '<li role="presentation" ng-repeat="option in options | filter: searchFilter">';
        }

        template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';

        if (checkboxes) {
            template += '<div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /> {{getPropertyForObject(option, settings.displayProp)}}</label></div></a>';
        } else {
            template += '<span data-ng-class="{\'glyphicon glyphicon-ok\': isChecked(getPropertyForObject(option,settings.idProp))}"></span> {{getPropertyForObject(option, settings.displayProp)}}</a>';
        }

        template += '</li>';

        template += '<li class="divider" ng-show="settings.selectionLimit > 1"></li>';
        template += '<li role="presentation" ng-show="settings.selectionLimit > 1"><a role="menuitem">{{selectedModel.length}} {{texts.selectionOf}} {{settings.selectionLimit}} {{texts.selectionCount}}</a></li>';

        template += '</ul>';
        template += '</div>';

        element.html(template);
    },
    link: function ($scope, $element, $attrs) {
        var $dropdownTrigger = $element.children()[0];

        $scope.toggleDropdown = function () {
            $scope.open = !$scope.open;
        };

        $scope.checkboxClick = function ($event, label) {
            $scope.setSelectedItem(label);
            $event.stopImmediatePropagation();
        };

        $scope.externalEvents = {
            onItemSelect: angular.noop,
            onItemDeselect: angular.noop,
            onSelectAll: angular.noop,
            onDeselectAll: angular.noop,
            onInitDone: angular.noop,
            onMaxSelectionReached: angular.noop
        };

        $scope.settings = {
            dynamicTitle: true,
            scrollable: false,
            scrollableWidth: '300px',
            scrollableHeight: '300px',
            closeOnBlur: true,
            displayProp: 'label',
            idProp: 'label',
            externalIdProp: 'label',
            enableSearch: false,
            selectionLimit: 0,
            showCheckAll: true,
            showUncheckAll: true,
            closeOnSelect: false,
            buttonClasses: 'btn btn-default',
            closeOnDeselect: false,
            groupBy: $attrs.groupBy || undefined,
            groupByTextProvider: null,
            smartButtonMaxItems: 0,
            smartButtonTextConverter: angular.noop
        };

        $scope.texts = {
            checkAll: 'Check All',
            uncheckAll: 'Uncheck All',
            selectionCount: 'checked',
            selectionOf: '/',
            searchPlaceholder: 'Search...',
            buttonDefaultText: 'Select a subject',
            dynamicButtonTextSuffix: 'checked'
        };

        $scope.searchFilter = $scope.searchFilter || '';

        if (angular.isDefined($scope.settings.groupBy)) {
            $scope.$watch('options', function (newValue) {
                if (angular.isDefined(newValue)) {
                    $scope.orderedItems = $filter('orderBy')(newValue, $scope.settings.groupBy);
                }
            });
        }

        angular.extend($scope.settings, $scope.extraSettings || []);
        angular.extend($scope.externalEvents, $scope.events || []);
        angular.extend($scope.texts, $scope.translationTexts);

        $scope.singleSelection = $scope.settings.selectionLimit === 1;

        function getFindObj(label) {
            var findObj = {};

             if ($scope.settings.externalIdProp === '') {
                findObj[$scope.settings.idProp] = label;
            } else {
                findObj[$scope.settings.externalIdProp] = label;
            }

            return findObj;
        }

        function clearObject(object) {
            for (var prop in object) {
                delete object[prop];
            }
        }

        if ($scope.singleSelection) {
            if (angular.isArray($scope.selectedModel) && $scope.selectedModel.length === 0) {
                clearObject($scope.selectedModel);
            }
        }

        if ($scope.settings.closeOnBlur) {
            $document.on('click', function (e) {
                var target = e.target.parentElement;
                var parentFound = false;

                while (angular.isDefined(target) && target !== null && !parentFound) {
                    if (_.contains(target.className.split(' '), 'multiselect-parent') && !parentFound) {
                        if (target === $dropdownTrigger) {
                            parentFound = true;
                        }
                    }
                    target = target.parentElement;
                }

                if (!parentFound) {
                    $scope.$apply(function () {
                        $scope.open = false;
                    });
                }
            });
        }

        $scope.getGroupTitle = function (groupValue) {
            if ($scope.settings.groupByTextProvider !== null) {
                return $scope.settings.groupByTextProvider(groupValue);
            }

            return groupValue;
        };

        $scope.getButtonText = function () {
            if ($scope.settings.dynamicTitle && ($scope.selectedModel.length > 0 || (angular.isObject($scope.selectedModel) && _.keys($scope.selectedModel).length > 0))) {
                if ($scope.settings.smartButtonMaxItems > 0) {
                    var itemsText = [];

                    angular.forEach($scope.options, function (optionItem) {
                        if ($scope.isChecked($scope.getPropertyForObject(optionItem, $scope.settings.idProp))) {
                            var displayText = $scope.getPropertyForObject(optionItem, $scope.settings.displayProp);
                            var converterResponse = $scope.settings.smartButtonTextConverter(displayText, optionItem);

                            itemsText.push(converterResponse ? converterResponse : displayText);
                        }
                    });

                    if ($scope.selectedModel.length > $scope.settings.smartButtonMaxItems) {
                        itemsText = itemsText.slice(0, $scope.settings.smartButtonMaxItems);
                        itemsText.push('...');
                    }

                    return itemsText.join(', ');
                } else {
                    var totalSelected;

                    if ($scope.singleSelection) {
                        totalSelected = ($scope.selectedModel !== null && angular.isDefined($scope.selectedModel[$scope.settings.idProp])) ? 1 : 0;
                    } else {
                        totalSelected = angular.isDefined($scope.selectedModel) ? $scope.selectedModel.length : 0;
                    }

                    if (totalSelected === 0) {
                        return $scope.texts.buttonDefaultText;
                    } else {
                        return totalSelected + ' ' + $scope.texts.dynamicButtonTextSuffix;
                    }
                }
            } else {
                return $scope.texts.buttonDefaultText;
            }
        };

        $scope.getPropertyForObject = function (object, property) {
            if (angular.isDefined(object) && object.hasOwnProperty(property)) {
                return object[property];
            }

            return '';
        };

        $scope.selectAll = function () {
            $scope.deselectAll(false);
            $scope.externalEvents.onSelectAll();

            angular.forEach($scope.options, function (value) {
                $scope.setSelectedItem(value[$scope.settings.idProp], true);
            });
        };

        $scope.deselectAll = function (sendEvent) {
            sendEvent = sendEvent || true;

            if (sendEvent) {
                $scope.externalEvents.onDeselectAll();
            }

            if ($scope.singleSelection) {
                clearObject($scope.selectedModel);
            } else {
                $scope.selectedModel.splice(0, $scope.selectedModel.length);
            }
        };

        $scope.setSelectedItem = function (label, dontRemove) {
            var findObj = getFindObj(label);
            var finalObj = null;

            if ($scope.settings.externalIdProp === '') {
                finalObj = _.find($scope.options, findObj);
            } else {
                finalObj = findObj;
            }

            if ($scope.singleSelection) {
                clearObject($scope.selectedModel);
                angular.extend($scope.selectedModel, finalObj);
                $scope.externalEvents.onItemSelect(finalObj);
                if ($scope.settings.closeOnSelect) $scope.open = false;

                return;
            }

            dontRemove = dontRemove || false;

            var exists = _.findIndex($scope.selectedModel, findObj) !== -1;

            if (!dontRemove && exists) {
                $scope.selectedModel.splice(_.findIndex($scope.selectedModel, findObj), 1);
                $scope.externalEvents.onItemDeselect(findObj);
            } else if (!exists && ($scope.settings.selectionLimit === 0 || $scope.selectedModel.length < $scope.settings.selectionLimit)) {
                $scope.selectedModel.push(finalObj);
                $scope.externalEvents.onItemSelect(finalObj);
            }
            if ($scope.settings.closeOnSelect) $scope.open = false;
        };

        $scope.isChecked = function (label) {
            if ($scope.singleSelection) {
                return $scope.selectedModel !== null && angular.isDefined($scope.selectedModel[$scope.settings.idProp]) && $scope.selectedModel[$scope.settings.idProp] === getFindObj(label)[$scope.settings.idProp];
            }

            return _.findIndex($scope.selectedModel, getFindObj(label)) !== -1;
        };

        $scope.externalEvents.onInitDone();
    }
};
}]);

Answer 1

试试这个：

替换：

<td> <a><i class="fa fa-remove" ng-click="supprimer()"></i></a>supprimer</td>

有了这个：

<td> <a><i class="fa fa-remove" ng-click="supprimer($index)"></i></a>supprimer</td>

然后在你的控制器中执行此操作：

$scope.supprimer = function(index) {
    $scope.example14model.splice(index, 1);
}

祝你好运：）

同时删除行并禁用dropdown-multiselect中的复选框angularsjs

1 个答案: