Question

我在UI上显示了一个名为 namesData 的数组。默认情况下，应选中复选框。取消选中复选框后，该项应从namesData中删除。如果选中该复选框，则应将其添加回namesData。

$scope.namesData = [{"name":"abc.txt"}, {"name":"xyz.txt"}]

HTML：

<div ng-repeat="namesList in namesData">
        <input type="checkbox" ng-model="nameItem[$index].checked" ng-change="nameChange(namesList, nameItem[$index].checked, 'nameObj'+ $index, $index)" ng-checked="nameItem.checked" name="nameObj" id="{{'nameObj'+$index}}"/>&nbsp;
        <span>{{namesList.name}}</span>

控制器：

$scope.namesData = [{"name":"abc.txt"}, {"name":"xyz.txt"}];
$scope.nameItem.checked = true;

$scope.nameChange = function(list, isChecked, id, itemNum){
    if (isChecked){
        $scope.namesData.push(list);
    }
    else
        $scope.namesData.splice($scope.newNamesList.indexOf(list), 1);
};

问题：上述逻辑的问题在于，已将checked / unchecked项添加/删除到namesData数组的末尾而不是其实际索引项。请告知如何解决此问题。

Answer 1

如果您只需要提交选中的项目，那么如何使用类似于下面的逻辑。您可以从阵列中过滤选中的项目并使用它们。如果您确实需要修改原始数组，则必须保留原始数组的副本，并通过检查原始数组将选中的项目插入其位置。

＆＃13;

int Game::Start(HINSTANCE instance, int showCMD)
{
    WNDCLASSEX winClass    = {0};
    winClass.cbSize        = sizeof(winClass);
    winClass.style         = CS_HREDRAW | CS_VREDRAW;
    winClass.lpfnWndProc   = WndProc;
    winClass.hInstance     = instance;
    winClass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
    winClass.lpszClassName = _winClassName;
    winClass.hCursor       = (HCURSOR)LoadImage(NULL, MAKEINTRESOURCE(OCR_CROSS), IMAGE_CURSOR, 0, 0, LR_SHARED);   //using a cross for a cursor because we're hipsters here at cow_co industries.

    RegisterClassEx(&winClass);

    /**
    *   WS_EX_CLIENTEDGE gives the client a sunken edge.
    **/
    winHandle = CreateWindowEx(WS_EX_CLIENTEDGE, _winClassName, "Win32 Pong", WS_OVERLAPPEDWINDOW, CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, NULL, NULL, instance, NULL);

    if(!winHandle)
    {
        return EXIT_FAILURE;
    }

    //other stuff...

＆＃13;

angular.module("myApp", []).controller("myCtrl", function($scope) {

  $scope.namesData = [{
    name: "abc.txt",
    checked: true
  }, {
    name: "xyz.txt",
    checked: true
  }];
  $scope.nameItem = {
    checked: true
  };


  $scope.submit = function() {
    $scope.selectedList = $scope.namesData.filter(function(namesDataItem) {
      return namesDataItem.checked;
    });
    console.log($scope.selectedList);
  };

});

＆＃13;

选中，取消选中数组angularjs javascript中的复选框项

1 个答案: