javascript - 从数组 Angular js中删除未经检查的值

Question

我是 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;
  };

我有一个全局声明的数组，因此，我想将选定的复选框表数据的值放入该数组中。我能够在数组中获取该值。因此，当用户取消选中时，未选中的值也应该从该数组中删除。所以，当用户检查时， 我已经给出了一个按钮，将所有检查的消息发送到后端。 因此，当我取消选中并按下按钮时，所有消息仍保留在数组中。

    $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>

那么，我该如何解决这个问题呢？

Answer 1

您所做的不是实现您所需目标的 Angular 方式。

但是，如果您需要以与您相同的方式进行操作，那么您应该进行以下更改。

如果未选中该值，则应使用 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;
  };

要以 Angular 方式实现，需要使用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>