当 Ng-Click 在 ng-repeat 中对被点击的元素执行 ng-show 时

Question

我试图让元素在加载期间显示特定文本。我运行遇到的问题是元素在 ng-repeat 中重复。当我点击一个时，他们都会切换而不是那个元素。我不确定如何只定位一个。

<div ng-repeat="session in importableMeetings">
    <a ng-click="importMeeting(session.sessionId)" class="btn btn-default btn-xs">
        <span ng-show="loadingBtn">Loading...</span>
        <span ng-show="!loadingBtn">Import &raquo;</span>
    </a>
</div>

$scope.importMeeting = function (meetingId) {
          $scope.loadingBtn = true;

          .......

        };

Answer 1

您正在将所有 ng-repeat 项绑定到相同的值。为了单独进行，您需要将每个项目绑定到它自己的值。我会通过在每个 importableMeetings 项上设置 loadingBtn 来做到这一点（默认为 false）。例如，在 link:

里面

<a ng-click="importMeeting(session)">
    <span ng-show="session.loadingBtn">Loading...</span>
    <span ng-show="!session.loadingBtn">Import</span>
</a>

然后在你的控制器中：

$scope.importMeeting = function(session){
    // do what you were originally doing with your session.sessionId

    // set the bool
    session.loadingBtn = true;
};

请注意，您现在将整个 session 对象（而不仅仅是 id）传递给函数，从而允许您更改其属性。

Answer 2

如果你因为某些原因不能使用session.loadingBn，那么你可以使用：

<a ng-click="importMeeting(session); loadingBtn = !loadingBtn">
    <span ng-show="loadingBtn">Loading...</span>
    <span ng-show="!loadingBtn">Import</span>
</a>

ng-repeat 中的每个实例都会创建它自己的范围。因此，即使它们都被称为 loadingBtn，点击也只会改变 loadingBtn 的一个实例。

当 Ng-Click 在 ng-repeat 中对被点击的元素执行 ng-show 时

When Ng-click do ng-show on the clicked element in a ng-repeat

angularjs

angularjs-ng-repeat

angularjs-ng-click

angularjs-ng-show