Question

我正在使用Angular构建一个页面，并且只有在覆盖＆＃39;时才尝试有条件地将ng-style应用于div。在我的数据资源中定义。 {{data.cover}}在模板中呈现封面图片网址。我尝试了下面的代码，但它没有用。

<div class="cover" ng-style="{'background-image: url({{data.cover}})':data.cover}"></div>

更新：这是我提出的解决方案，在控制器中添加它（我需要为用户封面和头像做同样的事情）：

var cover = $scope.data.cover; 
var avatar = $scope.data.user.image; 

if (typeof $scope.data.cover !== "undefined") { 
    $scope.coverImage = { 'background-image': 'url('+cover+')' }; 
} 

if (typeof $scope.data.avatar !== "undefined") { 
    $scope.avatarImage = { 'background-image': 'url('+avatar+')' }; 
}

在HTML模板中：

<div class="cover" ng-style="coverImage"></div>
<div class="avatar" ng-style="avatarImage"></div>

虽然我不确定这是否会被视为应该通过指令而不是控制器处理的DOM操作？看起来在控制器中执行此操作要简单得多，而不是单独的指令。

Answer 1

根据Angular ng-style with a conditional expression，我会使用这种语法：

<div class="cover" ng-style="coverExist() && {'background-image': 'url({{data.cover}})'}"></div>

如果变量存在，则返回true的方法，或者返回false，请参阅以下内容：

$scope.coverExist = function()
    { 
if (typeof $scope.data.cover == "undefined") return false;
else
return true; 
}

你可能会问，为什么一种方法，我可以测试data.cover刚刚得到一个＆＃34; truhly＆＃34;值。例如，如果您需要更改条件，只有在它具有特定大小/分辨率时才设置它，无论如何，只需更改方法行为并保持＆＃34; true＆＃34;和＆＃34;假＆＃34;根据您的情况返回。

Answer 2

尝试：

ng-style="data.cover && {'background-image: url({{data.cover}})'}"

Answer 3

试试这个

<div class="cover" ng-style="!!data.cover && {'background-image: url({{data.cover}})'}"></div>

仅当此数据存在时才应用ng样式

3 个答案: