使用Angular更改按鈕「狀態」？

我有一張桌子。此表中的每個元素都是一個訂單，並且有一個按鈕可以更改此訂單的狀態。我希望這個按鈕的文本可以更改爲下一個狀態，所以也就是說。如果訂單處於「打包」狀態，則該按鈕應爲「正在交付」。使用Angular更改按鈕「狀態」？

該按鈕正在工作，只是在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', []); 

    }});

來源

2016-05-23 NicklasN

你能發佈你的HTML和控制器代碼嗎？ –

我添加了相關代碼片段:) – NicklasN

您可以使用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>

來源

2016-05-23 14:03:45

謝謝！這將工作，但我需要設置條件到下一個條件，即。數組。任何想法如何處理？ – NicklasN

如果你這樣做，使用ng-if而不是ng-show，這樣所有的按鈕都不在你表格中的每一行的HTML中。使用ng-show會在這裏增加不必要的開銷和內存消耗，以及具有相同id的多個元素，這可能在以後出現問題。 –

當你沒有提供的數據我認爲這可以幫助你

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

來源

2016-05-23 14:06:03

謝謝，我現在增加了數據..然而，我不明白這個片段，我正在努力學習。點擊看什麼根？ – NicklasN

我會添加類似下面給你的控制器：

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

來源

2016-05-23 14:29:00

我現在製作了這樣的控制器，但它使其他一切崩潰; https://codeshare.io/4PMkj – NicklasN

我建議的代碼應該在你的控制器的開始。不在另一個功能的中間。我沒有注意到你以前有一個更新狀態控制器作爲單獨的控制器。這是過度殺毒，你可以將這些東西添加到你從中獲取數據的同一個控制器。 –

我也試過，但無論我把它放在哪裏，它都會給我這條線上的語法錯誤; elseif（curIndex <0）{ return $ scope.statuses [0] } – NicklasN

使用Angular更改按鈕「狀態」？

回答

相關問題