如何使用ng-if与异步数据

时间:2017-08-05 08:52:25

标签: angularjs

我的 ng-if 总是为false。因为我在我的控制器中使用的数据是通过API响应提供的。我的问题是,如何使用ng-if和异步数据?

我的HTML下面:

  <div>
    <span ng-if="isFollowed">
      <form ng-submit="unfollow()">
        <input class="btn btn-danger" type="submit" value="Unfollow">    
      </form>
    </span>

    <span ng-if="!isFollowed">
      <form ng-submit="follow()">
        <input class="btn btn-primary" type="submit" value="Follow">    
      </form>
    </span>
  </div>

我的控制器代码:

$http.get('/api/isFollowing', {params: { fromID: fromID, toID: toID }})
    .then(function(res){
        if(res.message === true){
            $scope.isFollowed = true;
        }else {
            $scope.isFollowed = false;
        }
    });

顺便说一下,我知道我的 / api / isFollowing API调用就像我在浏览器中检查响应一样,它会以 true 的形式返回。

我认为 .then 可以解决这个问题,但我显然错了。可能是一个经常被问到的问题,但我没有在任何地方看到答案。

顺便使用Angular 1.6.4。

提前致谢!

1 个答案:

答案 0 :(得分:2)

您必须访问响应的data属性,并检查data的message属性是否为布尔值。像这样更改您的控制器代码

$http.get('/api/isFollowing', {params: { fromID: fromID, toID: toID }})
    .then(function(res){
        if(res.data.message === true){
            $scope.isFollowed = res.data.message;
        }else {
            $scope.isFollowed = !!res.data.message;
        }
    });