Question

我正在尝试转换jQuery函数以使用Angular。在大多数情况下，除了不断添加元素而不是删除旧元素（也就是不切换）之外，它工作（相当差）。当另一个打开时，我需要一个盒子消失。任何帮助完成这一点表示赞赏。此外，欢迎任何改进建议。

CodePen：http://codepen.io/Auzy/pen/ENEpPd

HTML：

    <div id="Main" data-ng-app="app" data-ng-controller="starWarsCtrl">
    <div class="row clearfix">
        <div ng-repeat="character in characters" class="rowBox">
            <div ng-click="expand()" class="rowBoxLogo" id="{{character.name}}">
                <img src="http://lorempixel.com/50/50/nature/1" />
            </div>

        </div>
    </div>
</div>

我的JS：

      var app = angular.module("app", [
]);

app.factory("Characters", function () {
    var Characters = [
    {"name": "Obi-Wan Kenobi",
     "index":88,
      "cat": "jedi"},
    {"name": "Yoda",
     "index":69,
      "cat":"jedi"},
    {"name": "Lando",
     "index":31,
      "cat": "smuggler"},
    {"name": "Han Solo",
     "index":90,
      "cat": "smuggler"},
    {"name": "Darth Vader",
     "index":98,
      "cat": "sith"},
    {"name": "Jar-Jar Binks",
     "index":80,
      "cat": "alien"},
    {"name": "Mace Windu",
     "index":45,
      "cat": "jedi"},
    {"name": "Chewy",
     "index":76,
      "cat": "smuggler"}
  ];
    return Characters;
});

app.controller('starWarsCtrl', function ($scope, Characters) {
  $scope.characters = Characters;
    $scope.expand = function(){
        var $info = $('<div class="expand"><p class="par"></p></div>');
            $('.rowBoxLogo').click(function() {
                var $block = $(this).parent('.rowBox');
                if ($block.next().hasClass('.rowInfo')) {
                    $info.toggle();
                }
                else {
                    $info.insertAfter($block).css('display', 'block');
                    $info.find('.par').text("ID = " + this.id);
                }
            });
    }

});

Answer 1

你可以创建一个新的范围变量$ scope.expandedCharacterId，它最初为null。

当选择一个字符（或者可能取消选择）时，会调用expand（character）来设置$ scope.expandedCharacterId

然后在每个角色上，使用ng-class =＆＃34; {expanded：character.id == expandedCharacterId}＆＃34;

这样，如果选中了所选角色，则会给它一个扩展类。（您可以使用ng-if或ng-show代替，但通过使用类，您可以使用css转换的强大功能等。）

希望这会有所帮助。

Answer 2

我检查了你的代码，似乎这个if条件永远不会满足：

if ($block.next().hasClass('.rowInfo'))

这是有道理的，因为我没有看到您在代码中的任何位置添加该课程。

按照这样的方式修改你的扩展方法，它会起作用：

$scope.expand = function(id){
    console.log(id);
    var $info = $('<div class="expand"><p class="par"></p></div>');
    var $block = $('#' + id).parent();

    $('.expand').hide();
    $info.insertAfter($block).css('display', 'block');
    $info.find('.par').text("ID = " + id);      
}

在Angular中模仿jQuery的切换

2 个答案: