AngularJs CSS實時更改

Question

我有一個基於angularjs構建的功能，這是一個下拉選項，用戶可以在其中進行status更改，更改將反映在狀態上。 這是我的html代碼段：

狀態

<td data-title="'Status'"><span  class="label label-sm label-{{orders.state}}">{{orders.state}}</span></td>

下拉選項

<ui-select ng-model="state.selected" ng-change="openModal(state.selected.name,orders.order_id)" ng-if="orders.state == 'Paid'" theme="selectize" ng-disabled="disabled" style="width: 300px;">
        <ui-select-match  placeholder="Fullfilment status">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="state in states | filter: $select.search">
        <span ng-bind-html="state.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>

ng-click將觸發對服務器的發布請求，如下所示：

myApp.controller('ChgResvCtrl',['$scope','$modalInstance','$state','content','Account','ngNotify',function($scope,$modalInstance,$state,content,Account,ngNotify){

    $scope.status = content.status;
    $scope.status_oid = content.orderid;

    $scope.confirmChg = function(oid,status){
        Account.merchantSetStatus(oid,status)
           .then(function(response){
                ngNotify.set('Status changed successfully', {
                type: 'info',
                position: 'bottom',
                duration: 2000
            });

           })
           .catch(function(response){

           })  
    }
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

我收到的響應是{status:'Fullfilled',success:true} 。 問題是，收到回復后如何隱藏dropdown選項。

另外，如何將{{orders.state}}替換為我收到的html <span class="label label-sm label-{{orders.state}}">{{orders.state}}</span>

即： label-Paid(current) ---> label-Fullfilled(from response)

謝謝！！

Answer 1

好的，對於狀態，如果您定義了$ scope.orders.state：

<td data-title="'Status'"><span ng-class="getClass()" class="label label-sm">{{orders.state}}</span></td>

在您的控制器中：

$scope.getClass = function() {
    return 'label-' + $scope.orders.state;
}

要隱藏下拉列表，只需創建一個變量並將其與ng-show或ng-hide結合使用。