我是 angular js 的新手。我有一个带有表格的复选框。
<td><input type="checkbox" ng-if="report.attributes.message.length > 0" ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">{{ report.attributes.message }}</td>
在这里,我有一个方法getcheckedData()
。所以,在那个方法中
var messages = [];
$scope.getcheckedData = function(SelectedVal) {
$("input:checkbox[type=checkbox]:checked").each(function() {
if ($.inArray(SelectedVal , messages) === -1){
messages.push(SelectedVal);
}
});
return messages;
};
我有一个全局声明的数组,因此,我想将选定的复选框表数据的值放入该数组中。我能够在array
. 因此,当用户取消选中时,未选中的值也应该从中删除array
。所以,当用户检查然后,我给了一个按钮,我将所有检查的消息发送到后端。因此,当我取消选中并按下按钮时,所有消息仍保留在数组中。
$scope.sendAllMessages = function() {
uploadService.SendMessagesToQueue(uploadService.currentFileName,$scope.documentType,messages)
.then(function () {
}, function (error) {
$scope.errorMessage = error.status + " : " + error.statusText;
toastr.error($scope.errorMessage, 'Error : ' + error.status);
if (error.status === 401) {
loginService.authenticationError();
}
})
.finally(function () {
});
};
对于按钮 -
<button type="submit" ng-click = "sendAllMessages()" class="button-size btn btn-primary">Send </button>
那么,我该如何解决这个问题呢?
你所做的不是实现你所需要的角度方式。
但是,如果您需要以与您相同的方式进行操作,那么您应该进行以下更改。
如果未选中,您应该从数组中删除该值,使用 messages.splice(index, 1);
这是您更改后的代码,没有 ng-model(不推荐)
var messages = [];
$scope.getcheckedData = function(SelectedVal) {
if ($.inArray(SelectedVal , messages) === -1){
messages.push(SelectedVal);
}
else
{
var index = messages.indexOf(SelectedVal)
messages.splice(index, 1);
}
return messages;
};
要以有角度的方式实现它,您需要使用 ng-model
这是一个使用 Angular 的示例
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.messages = {
};
$scope.reports = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Ctrl" ng-app="app">
<span ng-repeat="report in reports">
<label class="checkbox" for="{{report.id}}">
<input type="checkbox" ng-model="messages[report.id]" name="group" id="{{report.id}}" />
{{report.name}}
</label>
</span>
<pre ng-bind="messages | json"></pre>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句