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>

有角度的

 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]

这样可以防止数组被覆盖。

改进

我已经更新了小提琴。您不能单击复选框并将值保存在另一个数组中。执行此操作的最佳方法是使用Array原型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

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

角度复选框不会被检查？

1 个答案: