如何有条件地取消选中Angular ng-grid中的复选框? (恢复/撤消单元格值onChange或onClick。)

时间:2014-12-11 12:02:42

标签: javascript jquery angularjs angularjs-scope ng-grid

我一直试图弄清楚如何以编程方式"取消选中" ng-grid上的一个复选框好几天了,我开始迷失自己的想法。解决这个问题可能很难。 我已经尝试了所有我能想到的东西,并且我已经尝试了我能够在互联网上找到的每一个例子。拜托,有人怜悯我。

网格显示正常,但我无法弄清楚如何在出现这种情况时取消选中复选框:" if(!daysvalidfor || daysvalidfor< 0 || daysvalidfor> 100000)"。这种情况应该发生在" daysvalidfor"当某人检查该给定行的复选框时,该字段为空;当发生这种情况时,我想"撤消"复选框使其再次为空。那就是它!我想做的就是有条件地取消选中复选框。简单,对吧?

以下是HTML中的相应网格:

                <div id="trainingGrid" 
                    class="gridStyle" 
                    ng-grid="trainingGridOptions" 
                    class="ngGrid" 
                    ng-show="isLocationSelected && !isMeetingSelected()" 
                        >
                </div>
                <div id="meetingGrid" 
                        class="gridStyle" 
                        ng-grid="meetingGridOptions" 
                        class="ngGrid" 
                        ng-show="isLocationSelected && !isTrainingSelected()" 
                            >
                </div>

在我彻底尝试解决此问题时,您会看到可能没有意义或被注释掉的代码。

managementApp.controller('managementController', 
    function ($scope, $timeout, $http) {
        $scope.locationName;
        $scope.myLocation;
        $scope.locations = {};
        $scope.trainingTemplates = {};
        $scope.meetingTemplates = {};
        $scope.getLocations = function(homeId) {
            var data = contentClient.GetLocations(homeId);
            $scope.locations = data;
            return data;
            //locations = data;
        };  
        $scope.selectedGrid = 'training'; // this is the default value of the grid to display.
        $scope.setSelectedGrid = function(selectedGrid){ $scope.selectedGrid = selectedGrid}
        $scope.isTrainingSelected = function() {
            if($scope.selectedGrid == "training") 
            {
                return true;
            }
        };


        $scope.isLocationSelected = false;
        $scope.removeLocalTemplate = function(locationTemplateId, documentType){

            var result = contentClient.RemoveLocationTemplate(locationTemplateId, documentType);

        }
        $scope.getLocationTemplates = function(type) {
            var locationId = $scope.myLocation.Id;
            if(locationId)
            {
                var data = {};

                if(type == "training"){
                    data = contentClient.GetLocationTrainingTemplates(locationId);
                    $scope.trainingTemplates = data;
                }

                $("#trainingGrid").height(20*$scope.trainingTemplates.length);
                return data;
            }
            //locations = data;
        };
        $scope.toggleTraining = function(templateId, name, masterTemplateId, isLocalTemplate, daysvalidforStr, row){
            var oldCheckboxValue = $scope.rowHolder;
            var daysvalidfor = parseInt(daysvalidforStr);
            //$scope.master = false; // This line actually updates all of the values!!!
            var tempData = angular.copy($scope.trainingGridOptions.$gridScope.trainingTemplates);
            tempData.forEach(function(value, key){
                if (key > 50){
                tempData[key].isLocalTemplate = true;
                //value.isLocalTemplate = true;
                }
                if (key < 50){
                tempData[key].isLocalTemplate = false;
                //value.isLocalTemplate = true;
                }
            });
            $scope.trainingGridOptions.$gridScope.trainingTemplates = tempData;

            /*
            $scope.trainingGridOptions.$gridScope.renderedRows[6].entity.isLocalTemplate = false;
                        $scope.trainingGridOptions.$gridScope.renderedRows[7].entity.isLocalTemplate = true;
                            $scope.trainingGridOptions.$gridScope.renderedRows[8].entity.isLocalTemplate = true;
            */
            //alert(templateId + name + masterTemplateId + isLocalTemplate + daysvalidfor);
            // if $scope.rowHolder.isLocalTemplate == true, then construct the node.
            // if $scope.rowHolder.isLocalTemplate == false, then destroy the node.
            if ($scope.rowHolder.isLocalTemplate == true){ // means we are constructing
                if(!daysvalidfor || daysvalidfor < 0 || daysvalidfor > 100000){
                    alert("The value of daysvalidfor must be a valid number between 0 and 100000 for " + name);
                    //$scope.rowHolder.isLocalTemplate = isLocalTemplate;
                    //$scope.row.entity.daysvalidfor = isLocalTemplate;
                    //$scope.row = row;
                    //$scope.rowHolder.isLocalTemplate = false; // $scope.rowHolder is undefined unless we provide row in the method parameters above.
                    //$scope.row.entity.isLocalTemplate = false; // $scope.row is undefined.
                    //row.entity.isLocalTemplate = false;
                    //$scope.update($scope.rowHolder.isLocalTemplate);
                    //var isChecked = document.getElementById("isLocalCheckbox").checked;
                    // Note: The isChecked variable value should match the value of $scope.rowHolder.isLocalTemplate.
                    //document.getElementById("isLocalCheckbox").checked = false;
                    // we want to uncheck it here because there was not a valid daysvalidfor value.
                    $scope.trainingGridOptions.$gridScope.row.entity.isLocalTemplate = false;

                    $scope.trainingTemplates = $scope.getLocationTemplates("training");
                    $scope.$apply; // does nothing.
                    // reload the nodes to reset the grid checkbox due to invalid argument.
                }
                else{ // otherwise, construct the node.
                    var locationId = $scope.myLocation.Id;
                    var destinationContainerId = 1577;
                    var result = contentClient.constructLocalTraining(locationId, templateId, name, masterTemplateId, isLocalTemplate, destinationContainerId, daysvalidfor);

                }

            }
            if($scope.rowHolder.isLocalTemplate == false) { // means we unchecked the box to remove the node.
                // note: templateId and masterTemplateId should not match in this case.
                if(templateId != masterTemplateId){

                    var result = $scope.removeLocalTemplate(templateId, "localTrainingTemplate");

                    $scope.getLocationTemplates("training"); // refresh nodes. It should omit the existing one.
                }
                 else{
                     alert("Impossible case will never evaluate to true. Check $scope.toggleTraining.");
                 }
            }
        }

        $scope.invalidCheckbox = false;

        //$scope.master = true;
        $scope.selectLocation = function(location){
                $scope.myLocation = location;
                $scope.isLocationSelected = true;   
        };
        var template = '<input class="ngSelectionHeader" name="localCheckbox" id="isLocalCheckbox" type="checkbox" ng-checked="master" ng-click="cacheRow(row.entity, row); toggleTraining(row.entity.Id, row.entity.Name, row.entity.masterTrainingId, row.entity.isLocalTemplate, row.entity.daysvalidfor, row)" />';
        var newTemplate = '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox"  ng-model="row.entity.isLocalTemplate" ng-checked="row.entity.isLocalTemplate" ng-change="toggleTraining(row.entity.Id, row.entity.Name, row.entity.masterTrainingId, row.entity.isLocalTemplate, row.entity.daysvalidfor, row)" /></div>'
        /*
var template = '<input class="ngSelectionHeader" name="localCheckbox" id="isLocalCheckbox" type="checkbox" ng-model="row.entity.isLocalTemplate" ng-change="cacheRow(row.entity, row); toggleTraining(row.entity.Id, row.entity.Name, row.entity.masterTrainingId, row.entity.isLocalTemplate, row.entity.daysvalidfor, row)" />';
        var newTemplate = '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>'*/
        $scope.trainingGridOptions = {
            data: 'trainingTemplates',
            enableCellEdit: true,
            //enableCellSelection: false,
            enableRowSelection: false,
            columnDefs: [
              {field: 'Id', displayName: 'Id'},
              {field: 'Name', displayName: 'Name'},
              {field: 'masterTrainingId', displayName: 'masterTrainingId'},
             // {field: 'isLocalTemplate', displayName: 'isLocalTemplate'},
              {field: 'isLocalTemplate', 
                   displayName: 'isLocalTemplate', 
                   enableCellEditOnFocus: true,
                   cellTemplate: template},
              {field: 'daysvalidfor', 
                    displayName: 'daysvalidfor',
                    enableCellEditOnFocus: true,
                    cellTemplate: '<span ng-cell-text><input type="number" min="0" max="100000" ng-model="row.entity.daysvalidfor" ng-focus="cacheRow(row.entity)" ng-blur="updateEntity(row)" ></span>'
                }
            ]    
          };
        // see http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-dropdowns-and-selects/
                $scope.cacheRow = function(startValue, row) {
          $scope.rowHolder = {};
        $scope.row = row;
          angular.copy(startValue, $scope.rowHolder);
            $scope.rowHolder.isLocalTemplate = !row.entity.isLocalTemplate;
        };

        $scope.updateEntity = function(row){
            //$scope.gridColumn = column;
            //$scope.gridRow = row; // this wasn't commented out before.
            //$scope.gridCell = cellValue;
            //Code to prevent multiple ngBlur events
            //http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-dropdowns-and-selects/
            /*if(!$scope.save) {
                $scope.save = { promise: null, pending: false, row: null };
            }
              $scope.save.row = row.rowIndex;
              if(!$scope.save.pending) {
                $scope.save.pending = true;
                $scope.save.promise = $timeout(function(){
                  // $scope.list[$scope.save.row].$update();
                  alert("We will save your record to the server, we're updating row: " 
                    + $scope.save.row + " to have: " 
                    + $scope.list[$scope.save.row].isLocalTemplate );
                  $scope.save.pending = false; 
                }, 500);
              }*/ 
            };





    }
);

1 个答案:

答案 0 :(得分:0)

你在那里有一条线,注释掉:

//document.getElementById("isLocalCheckbox").checked = false;

&#34; isvalidcheckbox&#34;可能是错的,但该行应删除支票。编辑:如果您取消评论。

http://jsfiddle.net/snlacks/r9vw3ewk/