如何在http.get（）方法成功时为div设置类col-sm

Question

我有这个html页面，其中包含4个模板，每个模板的菜单都作为选项卡显示在顶部。 我想改变col-sm-4中tab（div）的宽度，当http.get（）方法返回true时就说col-sm-6，即成功

这是html菜单代码..

<div class="row">

        <div class="col-sm-3 bg-success" ng-click="go('/AddBook')">
            <h2>Add a Book</h2>
        </div>

        <div class="col-sm-3 bg-info" ng-click="go('/SearchBook')">
            <h2>Search a Book</h2>
        </div>

        <div class="col-sm-3 bg-success"
            ng-click="getAllBooks(); go('/ViewAllBooks')">
            <h2>View All Books</h2>
        </div>

        <div class="col-sm-3 bg-info" ng-click="go('/RequestBook')">
            <h2>Request a Book</h2>
        </div>

    </div>

以下是html页面的快照....

现在当http.get（）方法成功时，我想改变搜索工具的宽度，请求书并查看要更改的所有书籍。

Answer 1

嗨，你可以试试像。

ng-class="{ 'col-md-6' : expression }"

检查此https://docs.angularjs.org/api/ng/directive/ngClass

的文档

Answer 2

阅读https://docs.angularjs.org/api/ng/service/$http#get

上的$ http文档

在 [config] 中，您可以传递成功和错误功能。

很像这样：

get(url, 
    function(data){ 
       $scope.getSuccessful = true; 
    }, 
    function(errorData){
        $scope.getSuccessful = false;
    }
);

通话结束后，应调用成功/错误。然后在html中设置类的值。

<div class="{{getSuccessful ? 'col-md-2' : 'col-md-10'}}" ng-click="go('/RequestBook')">
    <h2>Request a Book</h2>
</div>

Answer 3

在http.get（）上设置promises并在成功时为一个范围变量赋予一个真值，然后在ui中使用ng-class所述的ng-class