【问题标题】:how to Change button text in each row in angularjs如何在angularjs中更改每一行中的按钮文本
【发布时间】:2015-10-20 10:39:21
【问题描述】:

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

   $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 是一个布尔值,如果为真,则按钮文本为“激活”,如果 isActive 的值为假,则按钮文本为停用。

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    当您收到数据时,您可以为数据中的每个项目添加一些字段,例如 isActive。然后在ng-repeatshow 按钮中根据您的项目的此字段的值。 您可以使用原生 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

    【讨论】:

      【解决方案2】:

      您需要尝试以下方法:

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

      【讨论】:

        【解决方案3】:

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2017-01-30
          • 2011-07-25
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-04-15
          • 1970-01-01
          • 2017-12-17
          相关资源
          最近更新 更多