如何更改angularjs中每行的按钮文本

时间:2015-10-20 10:39:21

标签: angularjs

我从angularjs中的其余服务获取数据,并使用ng-repeat以表格的形式显示数据。 我正在根据变量的值创建一个Activate / Deactivate按钮,例如,如果值为true,则显示Activate按钮,否则取消激活按钮。 这是我的控制器

   $scope.btnText='Deactivate';
      $scope.active={};
     FetchDomainService.get(function(
       response) {
        $scope.domains = response;
        $scope.active=$scope.domains[0].isActive;
          if(  $scope.active==='true'){
  $scope.btnText==='Activate';
     }
    });

这是我的HTML代码

   <tr ng-repeat="domain in domains">

                <td>{{domain.clientId}}</td>
                <td>{{domain.jndisys}}</td>
                <td>{{domain.buildVersion}}</td>
                <td>{{domain.domainUuid}}</td>
                <td>{{domain.isActive}}</td>
                <td>

                    <button class="btn"
                        ng-click="">
         <span class="glyphicon glyphicon-pencil"></span>{{btnText}}
                    </button>
                </td>

            </tr>

现在的问题是......如何更改每一行中的btn文本..我能够在所有行中更改它但不能在一行中更改它。我需要检查每一行然后更改按钮文本。 isActive是一个布尔值,如果是真的那么按钮文本是&#39;激活&#39;如果isActive的值为false,则按钮文本为Deactivate。

3 个答案:

答案 0 :(得分:3)

您收到该数据时,可以向数据中的每个项目添加一些字段,例如isActive。然后在ng-repeat显示按钮,根据您的项目的此字段的值。 您可以将原始JavaScript函数用作mapforEach来添加此值。

例如:

  FetchDomainService.get(
    function (resp) {
      $scope.items = resp.map(function (item) {
        item.isActive = true;
        return item;
      });
    }
  );

要显示/隐藏您的文字,请使用此值isActiveAngularJS指令ng-showng-hideng-if

<span ng-hide="item.isActive">Activate</span>
<span ng-show="item.isActive">Deactivate</span>

演示:http://plnkr.co/edit/cYm0R8r4iFygk9A8iVPj?p=preview

答案 1 :(得分:1)

您需要尝试以下内容:

<button class="btn" ng-disabled = "domain.isActive">
     <span class="glyphicon glyphicon-pencil">{{domain.isActive ? 'btnName1' :'btnName2'}}</span>  
</button>

答案 2 :(得分:1)

你可以在这里得到答案,这是非常好的解释https://github.com/angular/angular.js/issues/5912