0

我对 ng-checked 组件有以下问题:我有一个条目列表,其中包含在 html 模板中传递的选中属性。最初,这些条目在检查时带有 false,但在处理一些数据后,该值设置为 true。虽然我修改了数组并且我在该指令上设置了一个手表,但检查的值没有更新(设置为 false)。我不知道我错过了什么。模板 :

<span data-ng-repeat="item in data_used track by $index" ng-class="class">
        <input id="{{name_used}}_{{item.value}}" 
               type="checkbox" 
               name="{{name_used}}" 
               value="{{item.value}}" 
               data-ng-click="checkbox_click(item, $event)" 
               data-ng-checked="{{item.checked}}" 
               tabindex="0"/>
        <label for="{{name_used}}_{{item.value}}" 
               data-ng-show="item.text">{{item.text}}
        </label>
    </span>

控制器 :

$scope.$watch('data', function() {  
                    var array = angular.fromJson($scope.data);
                });

数组传递给指令:

$scope.useForAccountData = [
  {
   text: lang.get('nli_customer_data_debit_placeholder'),
   value: 'debit',
   backendValue: 'refund',
   checked: false
  },
  {
   text: lang.get('nli_customer_data_credit_placeholder'),
   value: 'credit',
   backendValue: 'withdrawal',
  checked: false
  }
];

数组更新的部分:

angular.forEach($scope.useForAccountData,function(el) { 
    if(bankAccount.usedFor && bankAccount.usedFor.indexOf(el.backendValue) >= 0) {
      el.checked = true;
    }
});

整个指令:

'use strict';

define(['angular'], function(angular) {


return angular.module('portals.vio.checkboxGroup', [])
    /* Directive */
    .directive('vioCheckboxGroup', [
    function() {
        return {
            restrict: 'AE',
            scope: {
                disabled: '@',
                click: '&',
                reset: '=?',
                data: '@',
                dataAddress: '@',
                name: '@',
                fieldsetLegend: '@',
                dynamic: '@',
                class: '@',
                validationRules: '=',
                validate: '='
            },
            controller: ['$scope','$http', 'lang', 'validationUtils', function($scope,$http,lang,validationUtils) {
                if( $scope.validationRules &&
                        $scope.validationRules.helperMessage) {
                        //show the helper message
                        $scope.textShow = 'help';
                        $scope.validationText = $scope.validationRules.helperMessage;
                    }
                $scope.itemsChecked = [];
                $scope.itemsCheckedPositions = [];
                if($scope.dataAddress) {
                    $http.get($scope.dataAddress).then(function(resp) {
                        $scope.data_used = angular.fromJson(resp.data);                                                                   
                    }, function(err) {
                        $scope.data_used = angular.fromJson($scope.data);
                    });   
                }
                else if($scope.data) {
                    $scope.data_used = angular.fromJson($scope.data);
                }
                $scope.name_used = ($scope.name) ? $scope.name: 'default';

                /* Trigger the given callback everytime a checkbox is toggled */
                $scope.checkbox_click = function(item, event) {
                    if(item.checked)
                        item.checked = false;
                    else
                        item.checked = true;


                    /* Create a list with all checked checkboxes */
                    angular.forEach($scope.data_used, function(val, key) {
                        if(val.checked){
                            $scope.itemsChecked.push(val);
                            $scope.itemsCheckedPositions.push(key);
                        }
                    });

                    var valid = $scope.validateCheckbox();

                    $scope.click({items: $scope.itemsChecked, valid: valid});
                };
                $scope.$watch('data', function() {  
                    var array = angular.fromJson($scope.data);
                });

                /* Function triggered through the reset callback */
                $scope.reset_fields = function() {
                    angular.forEach($scope.data_used, function(val, key) {
                        val.checked = false;
                    });
                };

                $scope.reset = function() {
                    $scope.reset_fields();
                };
                if( $scope.validationRules) {
                    $scope.validate = function(obj) {
                        if(obj === undefined) {
                            if(!$scope.valid) {
                                $scope.validateCheckbox();
                            }
                        }
                        else {
                            if( obj.type && obj.message) {
                                $scope.textShow = obj.type; 
                                $scope.validationText = obj.message;
                            }
                        } 
                    };
                };

                $scope.validateCheckbox = function() {
                    var checkboxIsValid = true;
                    if( $scope.validationRules && 
                        $scope.validationRules.hasChecked) {

                        try {
                            if($scope.itemsChecked.length !== $scope.validationRules.hasChecked ) {
                                $scope.textShow = 'error'; 
                                $scope.validationText = lang.get('errorSelectionNotMatchingSetNumber') + $scope.validationRules.hasChecked + lang.get('elements');
                                checkboxIsValid = false;
                            }
                        }
                        catch(ex) {
                            checkboxIsValid = false;
                        }
                    }
                    if( $scope.validationRules && 
                        $scope.validationRules.hasCheckedAtLeast) {

                        try {
                            if($scope.itemsChecked.length < $scope.validationRules.hasCheckedAtLeast) {
                                $scope.textShow = 'error'; 
                                $scope.validationText = lang.get('errorSelectionLowerThanExpected') + $scope.validationRules.hasCheckedAtLeast + lang.get('elements');
                                checkboxIsValid = false;
                            }
                        }
                        catch(ex) {
                            checkboxIsValid = false;
                        }
                    }
                    if( $scope.validationRules &&
                        $scope.validationRules.hasItemsChecked) {

                        try {
                            var counter = 0;
                            angular.forEach($scope.itemsCheckedPositions, function(val,key){
                                if($scope.itemsCheckedPositions.indexOf(val)<0){
                                    counter++;
                                }
                            });
                            if(counter !== $scope.itemsCheckedPositions.length) {
                                $scope.textShow = 'error'; 
                                $scope.validationText = lang.get('errorSelectionDifferentThanPresetOnes');
                                checkboxIsValid = false;
                            }

                        }
                        catch(ex) {
                            checkboxIsValid = false;
                        }
                    }
                    if(checkboxIsValid) {
                        $scope.textShow = ''; 
                        $scope.validationText = '';
                    }

                    return checkboxIsValid;                     

                }; 

                validationUtils.registerValidationEvents($scope, $scope.validateCheckbox);

            }],
            replace: true,
            templateUrl: '../../ui.components.base/vio-checkbox-group/vio-checkbox-group.html',
            link: function($scope, elem, attrs) {

                /* Update the fieldset legend with a name, if given */
                $scope.$watch('fieldsetLegend', function(new_val, old_val) {

                    var legend_elem = elem.find('legend');
                    legend_elem.remove();

                    if(new_val !== undefined) {
                        elem.find('fieldset')
                            .prepend('<legend>' + new_val + '</legend>');
                    }
                });



            }
        };
    }]);

});

更新手表部分中的数组后,我看到检查为 true 的值,但在 html 中,ng-checked 属性仍然为 false。

谢谢,维奥

4

0 回答 0