2

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

          .......

        };
4

2 回答 2

2

您将所有ng-repeat项目绑定到相同的值。为了单独执行此操作，您需要将每个项目绑定到其自己的值。我会通过设置loadingBtn每个importableMeetings项目来做到这一点（默认为 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）传递给函数，允许您更改其属性。

于 2015-09-09T23:08:29.637 回答
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 的一个实例。

于 2015-09-09T23:38:51.000 回答