Question

我有一个基于angularjs的功能，它是一个下拉选项，用户可以在其中更改status，更改将反映在状态上。这是我的html片段：

状态

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

DropDown选项

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

的回复状态

ie：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一起使用。

AngularJs css实时更改

1 个答案: