我对 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。
谢谢,维奥