javascript - Angular 复选框不会保持选中状态？

Question

我有一些 angular.js 代码，当用户单击某些复选框时，它会填充一个数组。我生成带有“ng-repeat”的复选框列表，当用户提交表单时，我需要将数组保存到服务器端。我有这个代码并且它可以工作.. fiddle here..但是，复选框不会保持“选中”状态吗？有人对如何修复这个 UI 错误有任何建议吗？

html

  <div ng-controller="MyCtrl">

      <div class="col-sm-6">
          <div class="form-group">
              <label>Search by Organism :</label>
              <input type="text" class="form-control" placeholder="Organism" ng-model="filterText">
          </div>
          <div class="well" style="max-height: 250px; overflow: auto;">
              <ul class="list-group checked-list-box" ng-repeat="x in organisms | filter: filterText">
                  <label>
                      <input type="checkbox" ng-change="match($index)" ng-model="orgs[$index]"> {{ x }}
                  </label>
              </ul>
          </div>
      </div>

    </div>

Angular

 var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.orgs = [];
        $scope.match = function(index) {
            console.log("index", index);
            console.log("organism: ", $scope.organisms[index]);
            $scope.orgs[index] = $scope.organisms[index];
        };

        $scope.organisms = ["Pseudomonas aeruginosa", "Stenotrophomonas maltophilia", "Pseudomonas luteola", "Pseudomonas aeruginosa", "Streptococcus pneumoniae", "Candida tropicalis", "IAV-H1N1", "IAV-H1N2", "IAV-H3N2", "IAV-mixed", "IAV-H10N8", "IAV-H2N2", "IAV-H5N1", "IAV-H5N6", "IAV-H7N3", "IAV-H7N7", "IAV-H7N9", "IAV-H9N2"];


}

Answer 1

注释掉该行

$scope.orgs[index] = $scope.organisms[index]

这将防止数组被覆盖。

<小时/>

改进

我已经更新了 fiddle 。您无法单击复选框并将值保存在另一个数组中。最好的方法是使用数组原型(prototype)push。您的新匹配函数如下。

$scope.match = function(orgName) {
    var index= $scope.selection.indexOf(orgName);
    if (index> -1) {
        $scope.selection.splice(index, 1);
    }
    else {
        $scope.selection.push(orgName);
    }
};

此外，复选框还有一个名为 value 的属性。这可以用作您的数据的占位符。

Updated fiddle

如果这是您想要的，请将答案标记为已接受。