选中或取消选中复选框时显示模式答案

【问题标题】：show modal when checkbox is check or uncheck选中或取消选中复选框时显示模式
【发布时间】：2016-04-20 15:47:05
【问题描述】：

点击这里查看我的代码： http://plnkr.co/edit/Z7QI9Ec53zfkDylnseAc?p=preview

HTML：

<ul>
<li ng-repeat="album in albums">
  <input type="checkbox" ng-model="album.selected" value={{album.name}} ng-click="save()"/> {{album.name}}
</li>

脚本：

$scope.save = function(item){
 $scope.mods = item;
  $scope.albumNameArray = [];
  angular.forEach($scope.albums, function(album){
  if (album.selected) $scope.albumNameArray.push(album.name);
  return false;
  });
 };
 $scope.edit = function(){
            if ($scope.albumNameArray ) {
                            $('#showModal').modal('show');
                        } else {
                            $('#showModal2').modal('show');
                        }

          }

如果我单击保存按钮而不选中复选框，我的项目工作正常，但如果我选中然后取消选中它，则会出现相同的模式。这仅在第一次重新加载时工作正常。我想要做的是，如果我选中复选框，ok modal 将显示其他模式将显示而无需重新加载

【问题讨论】：

请提供更多信息（代码）。
感谢您的回复 :) 这是我的 plnkr：plnkr.co/edit/Z7QI9Ec53zfkDylnseAc?p=info

标签： angularjs twitter-bootstrap checkbox

【解决方案1】：

这只有在第一次重新加载时才能正常工作。

它第一次工作的原因是$scope.albumNameArray 数组在第一次调用$scope.save 之前是未定义的。

您应该在调用$scope.save 之前初始化一个空数组，然后在if 语句中检查数组的length 属性。

以前，您只是检查是否定义了$scope.albumNameArray，即使数组为空也会返回true（这就是为什么您需要检查length 属性以确定数组是否包含任何值）。

Updated Example

$scope.edit = function(){
  if ($scope.albumNameArray.length) {
    $('#showModal').modal('show');
  } else {
    $('#showModal2').modal('show');
  }
}

【讨论】：