Question

我有一张桌子。此表中的每个元素都是一个订单，并且有一个按钮可以更改此订单的状态。我希望这个按钮的文本能够在行中更改为下一个状态，即ie。如果订单已打开＆＃34;打包＆＃34;按钮应显示为＆＃34;在交付＆＃34;。

按钮正在工作，只是在PHP中的数组中更改为next并将其解析为mySQL。但是我无法弄清楚如何在按钮上显示文字（我是非常新的角度）：

我可以在角度中以变量形式创建局部数组，并以某种方式过滤if语句中的JSON对象吗？（状态是纯粹的字符串）如何才能在按钮上正确显示？

表格代码：

  <tr ng-repeat="x in orders | filter: {area: areaFilter} | filter: {status: statusFilter}">
                <td>{{ x.orderID }}</td>
                <td>{{ x.customerID }}</td>
                <td>{{ x.address }}</td>
                <td>{{ x.area }}</td>
                <td>{{ x.date }}</td>
                <td>{{ x.orderType }}</td>
                <td>{{ x.trashcanType }}</td>
                <td>{{ x.status }}</td>
                <td>{{ x.renonord }}</td>


                <td class="text-right">
                  <button href="#" ng-controller="updateStatus" data-id="{{ x.orderID }}" ng-click="doClick()" class="btn btn-xs btn-default">Set to next status
</button>
                </td>

我使用的相关控制器：

  app.controller('getOrders3', function($scope, $http) {

      $scope.sortType     = 'orderID';
      $scope.sortReverse  = true;
      $scope.search   = '';

      $http.get("...filterOrders.php")
      .then(function (response) {$scope.orders = response.data.orders;});
      $scope.$on('updatedModel', function(event, []) {
       //alert("this long");
       $http.get("...filterOrders.php")
      .then(function (response) {$scope.orders = response.data.orders;})
      event.stopPropagation();
      });
    });





    app.controller('updateStatus', function($attrs, $scope, $http) {
       //$scope.updateStatus {};
       $scope.doClick = function () {
          var id = ($attrs).id;
          $http.get("...changeStatusTest.php",{params:{"orderID" : id}});
          //alert(id);
          $scope.$emit('updatedModel', []);

    }});

Answer 1

您可以使用ng-if来实现此目标

<table>
  <tr>
    <td>Order 1</td>
    <td ng-if="filter=='condition1'"><button>In delivery</button></td>
    <td ng-if="filter=='condition2'"><button>Dispatched</button></td>
  </tr>
 
</table>

Answer 2

由于您没有提供数据，我认为这可以帮助您

<button class="your class" ng-class="data.isPacked == 1 ? 'active': ''" ng-click="$root.packedDelivery(data);">{{(data.isPacked == 0) ? 'Packed': 'Delivery'}}

Answer 3

我将以下内容添加到您的控制器中：

$scope.statuses = [foo,fubar,snafu].split(",")
$scope.nextStatus = function(current) {
    var curIndex = $scope.statuses.indexof(current)
    if ( curIndex >=0 && curIndex < $scope.statuses - 1) { 
         return $scope.statuses[curIndex+1]
    } else (curIndex < 0) {
        return  $scope.statuses[0]
    }
    return $scope.statuses[$scope.statuses.length-1]
}

}

然后渲染这样的按钮：

<button href="#" ng-controller="updateStatus" data-id="{{ x.orderID }}" ng-click="doClick()" class="btn btn-xs btn-default">{{nextStatus(x.status}}
</button>

更改按钮＆＃34;状态＆＃34;使用Angular？

3 个答案: