angularjs - 选中或取消选中复选框时显示模式

Question

点击这里查看我的代码: 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');
                        }

          }

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

Answer 1

This works fine only in first reload.

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

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

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

Updated Example

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