gpt4 book ai didi

html - 如何包含 Font Awesome 图标以及如何在 html 中绑定(bind)

转载 作者:行者123 更新时间:2023-11-28 15:04:39 25 4
gpt4 key购买 nike

这是我的html代码

<body   ng-controller="myController"  >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="item" ng-repeat="item in Items">
<div my-widget data="item.obj" ng-class="item.classes"><!--ng-style="item.object" -->
</div>
</li>
</ul>
</div>

我的脚本在这里

var app=angular.module('myApp',['gridster'])
app.controller('myController',function($scope){

$scope.Items = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:3222,message:"TotalCost",classes:["six design","fa-motorcycle"]}}]


});

app.directive('myWidget',function(){

return{

restrict:"EA",
scope:{
data:'=',
title:'=',
label:'=',
details:'=',
message:'=',
},
templateUrl:'spare.html',
}

});

和我的CSS:

six design{


text align:right;
float:left;
}

多余的 html 放在这里

< span ng-controller="myController" >
<h5>{{data.message}}<h5>
<h3>{{data.details}}</h3>
<h3>{{data.label}}</h3>
<h2>${{data.data}}</h2>

<h4>{{data.title}}</h4>


</span>

现在我只需要包含 ng-class 数组,即仅在 obj 中包含 ="classes",然后如何在 html 中绑定(bind)它,我应该得到我应用到它们的所有 css,我也应该渲染所有我的字体图标

like `obj:{ data:3222,message:"TotalCost" ,classes:"fa fa-level-up"}`

and how to bind it in hmtl

最佳答案

你甚至可以添加一个数组到ng-class,

您在 item.obj 中有类,因此将 ng-class="item.classes" 更改为 ng -class="item.obj.classes"

<div style="background: yellow;width: 50px;" ng-repeat="item in Items">

<span style="margin-left: 10px" ng-repeat="class in item.obj.classes" ng-class="class" class="fa"></span>
<div my-widget data="item.obj"></div>
</div>

也不要使用带空格的类名,所以将 ,six design 更改为 six-design

所以 css 将是,

.six-design{
text align:right;
float:left;
}

对象变为,

classes:["six-design","fa-motorcycle"]

对象是,

$scope.Items = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj:{data:8988643347,right:'',title:'Income',classes:["style1","fa fa-apple","fa fa-youtube-square","fa-motorcycle"]}},
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:65476756,right:'',title:"Population",classes:["fa fa-map-marker","style2"] }},
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:54564545,right:'',title:"Users",classes:["fa fa-youtube-square","style3"]}},
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:123.33,label:"Money",classes:["design1","design2"]}},
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:3222,details:"Amount",classes:["design3","fa fa-shopping-cart","fa fa-motorcycle"]}},
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:3222,message:"TotalCost",classes:["sixdesign","fa-motorcycle"]}}]

Here is a working plunker

关于html - 如何包含 Font Awesome 图标以及如何在 html 中绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49692614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com