Question

我正在使用AngularJs ui bootstrap模式。我有一个带复选框的页面。当用户选中复选框并单击按钮时，它会将选中的复选框传递给模式：

var modalInstance = $modal.open({
   templateUrl: 'myModalContent.html',
   controller: ModalInstanceCtrl,
   resolve: {
     checkedSearches: function () {
         var checkedSearches = [];
         angular.forEach($scope.searches, function(search)
             {
                 if(search.checked) {
                     checkedSearches.push(search);
                 }
             });

            return checkedSearches;
      }
   }
 });

在我的模态中，我们再次将数据重新显示为复选框。用户可以选中/取消选中复选框并单击“保存”，它将保存所有选中的复选框。

var ModalInstanceCtrl = function ($scope, $modalInstance, checkedSearches) {
    $scope.checkedSearches = checkedSearches;

     var saveSearches = [];
     angular.forEach($scope.checkSearches, function(search)
              {
                  if(search.checked) {
                      saveSearches.push(search);
                  }
              });

}

问题是，它正在保存所有复选框。好像被检查的属性保留了复选框，即使用户在模态中取消选中它。我没有包含保存搜索的代码。我基本上推进了searchSearches数组，它似乎推动了所有的复选框，包括未经检查的复选框。

以下是我的复选框/模式：

<tr ng-repeat="search in checkedSearches">
    <td><input type="checkbox" ng-checked="search.checked" name="search" ng-model="search.checked" /></td><td>{{search.id}}</td><td>{{search.name}}</td>
</tr>

Answer 1

好吧，看起来问题是由于某种原因，复选框的checked属性没有绑定模型。所以我添加了一个ng-click指令来处理这个问题：

<tr ng-repeat="search in checkedSearches">
    <td>
        <input type="checkbox" name="search" ng-checked="search.checked" ng-click="setCheckbox(search)" />
     </td>
</tr>

我在我的模态控制器中添加了这个：

 $scope.setCheckbox = function(search) {
     if(search.checked == true) {
         search.checked = false;
     }
     else {
        search.checked = true;
     }
 };

现在，如果有人在那里，可以告诉我为什么复选框没有绑定到我的模型。

Angularjs UI Bootstrap模式 - 复选框已选中状态未更新

1 个答案: