javascript - 当表中状态获得批准时更改按钮文本

Question

我在 angularjs 中使用 ng-repeat 绑定(bind)表格，这是我的表格

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>
        Sr. no.
      </th>

      <th>
        Title
      </th>

      <th>
        Image
      </th>
      <th>
        Category
      </th>
      <th>
        PostedOn
      </th>
      <th>
        Created By
      </th>
      <th>
        Status
      </th>
      <th>
        Change Status
      </th>

    </tr>

  </thead>
  <tbody>
    <tr ng-repeat="obj in PostedBlogList | filter:searchText" ng-show="PostedBlogList.length">
      <td>{{$index+1}}</td>
      <td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.Title}}</a></td>
      <td>
        <img style="width:90px" ng-show="obj.Image" src="{{obj.Image}}">
        <img style="width:90px" ng-show="!obj.Image" src="/images/mail.png">
      </td>
      <td>
        {{obj.CategoryName}}
      </td>

      <td>
        {{obj.CreatedDate}}
      </td>
      <td>
        {{obj.FirstName}}({{obj.UserType}})
      </td>
      <td>
        {{obj.IsActive ? 'Approved ' : 'Pending'}}
      </td>
      <td>

        <button class="btn btn-primary waves-effect waves-light" ng-click="ToActiveBlog(obj.Id)" ng-bind="btnactivate" type="submit" value="Activate"></button>
      </td>
    </tr>
    <tr ng-show="PostedBlogList.length==0">

    </tr>
  </tbody>
</table>

在倒数第二个 td 中，我设置了已批准和待处理的值。

  {{obj.IsActive ? 'Approved ' : 'Pending'}}

td下方有一个按钮

<td>
  <button class="btn btn-primary waves-effect waves-light" ng-click="ToActiveBlog(obj.Id)" type="submit" value="Activate"></button>
</td>

上面有一个 activate 文本当我的状态在 angularjs 中获得批准时，如何设置按钮文本“停用”？

Answer 1

在按钮元素中使用 ng-value 属性而不是 value 属性。这专门用于 Angularjs 设置输入元素的值。

<td>
    <button class="btn btn-primary waves-effect waves-light" ng-click="ToActiveBlog(obj.Id)" ng-bind="btnactivate" type="submit" ng-value="obj.IsActive ? 'Activate' : 'Inactivate'"></button>
</td>

或者使用ng-if

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

<td ng-if=obj.IsActive>
    <button class="btn btn-primary waves-effect waves-light" ng-click="ToActiveBlog(obj.Id)" ng-bind="btnactivate" type="submit" value="Activate"></button>
</td>

<td ng-if=!obj.IsActive>
    <button class="btn btn-primary waves-effect waves-light" ng-click="ToActiveBlog(obj.Id)" ng-bind="btnactivate" type="submit" value="Inactivate"></button>
</td>