当 Ng-click 在 ng-repeat 中单击的元素上执行 ng-show答案

【问题标题】：When Ng-click do ng-show on the clicked element in a ng-repeat当 Ng-click 在 ng-repeat 中单击的元素上执行 ng-show
【发布时间】：2015-12-06 01:27:19
【问题描述】：

我试图让一个元素在加载过程中显示某些文本。我遇到的问题是元素在 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;

          .......

        };

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-click angularjs-ng-show

【解决方案1】：

如果你因为某种原因不能使用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 的一个实例。

【讨论】：

【解决方案2】：

您将所有ng-repeat 项目绑定到相同的值。为了单独执行此操作，您需要将每个项目绑定到其自己的值。我会通过在每个importableMeetings 项目上设置loadingBtn 来做到这一点（默认为false）。比如在链接里面：

<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）传递给函数，允许您更改其属性。

【讨论】：