Question

我使用这个html代码渲染出几个容器元素。由于没有ng-repeat="card in cards";

，因此实际上未呈现$scope.cards元素

<div id="container" ng-controller='DemoController'>
  <div ng-repeat = "movie in movies" class="repeat">

    <a ng-click="addMovie()" ui-sref=".container-big" >More info</a>
    <div ng-repeat="card in cards" my-card="card"></div>

  </div>
</div>

如果用户点击a，则会触发addMovie()功能

$scope.addMovie = function() {
    $scope.cards.push(new Card());
};

这反过来会创建一张新卡片，因为现在有一张卡片在<div ng-repeat="card in cards" my-card="card"></div>元素中创建了.repeat。

上述元素有一个名为my-card="card"的指令。因此，当创建元素时，它还会触发指令

angular.module('myApp').directive('myCard', function(){
    return {
        restrict: 'A',
        template: '<div ui-view="container-big"></div>',
        replace: true,
        transclude: false
    };
});

替换此元素

<div ng-repeat="card in cards" my-card="card"></div>

使用此元素

<div ui-view="container-big"></div>

a还有ui-sref=".container-big"，可将模板注入新创建的<div ui-view="container-big"></div>。

在此处查看此操作＆gt; http://plnkr.co/edit/B7CRjvdQ9paytwl5csKi?p=preview

我的问题是，我可以限制

的点击操作吗？

 <a ng-click="addMovie()" ui-sref=".container-big" >More info</a>

仅限点击的元素。因此，不是在所有元素上触发所有addMovie()函数。我只在点击的元素上触发它，导致只有一个容器发生变化。

Answer 1

每部电影都需要有一个单独的卡片阵列。一种方法是将cards作为movie的属性。

在HTML中，我们修改它以将movie传递给addCard()。在此上下文中，movie是ng-repeat正在迭代的当前电影。如果没有这个，addCard()函数就不会知道它应该添加哪些电影。我们还将第二个ng-repeat更改为使用movie.cards，以便它知道只查看与该电影相关的卡片。

<div ng-repeat = "movie in movies" class="repeat">
  <a ng-click="addCard(movie)" ui-sref=".container-big" >More info</a>
  <div ng-repeat="card in movie.cards" my-card="card"></div>
</div>

在JavaScript中，我们修改addCard()函数，以便将movie作为参数。我们还需要更改它，以便创建一个存储该电影卡片的地方

$scope.addCard = function(movie) {
    // create movie.cards array if it does not exist
    if (!movie.cards) {
      movie.cards = [];
    }
    // add the card to the list of cards for this movie
    movie.cards.push(new Card());
};

仅在多个元素中使用此元素进行ng-click

1 个答案: