使用Angular更改按钮“状态”？

Question

我有一张桌子。此表中的每个元素都是一个订单，并且有一个按钮可以更改此订单的状态。我希望这个按钮的文本可以更改为下一个状态，所以也就是说。如果订单处于“打包”状态，则该按钮应为“正在交付”。

该按钮正在工作，只是在PHP中的数组中更改为next，并将其解析为mySQL。但我不知道如何显示按钮上的文本（即时通讯非常新的角度）：

我可以在变量形式的角度本地数组，并以某种方式过滤相应我的JSON对象在if语句？ （状态是纯粹的字符串）我怎样才能让它在按钮上正确显示？

表代码：

<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>