在JQ中如果要为某一项添加CLASS的话,直接使用addClass 就可以实现。那么angular要实现此项效果,就需要用ng-class。关于ng-class的使用说明,在W3C 中有说明,此处不再赘述。
此处只针对我使用的部分进行说明。
ng-class 可以采用key-value 的形式实现class的添加。形如:ng-class = '{key:value}'
其中key为需要添加的class 的名称,value是一个布尔类型,如果为true,则添加class,如果为假 则不添加。
下面代码中的方案,主要采用给函数传递index值,通过判断index值和点击事件所在的li的索引是否一致,来判断是否添加class。
app.controller('myctrl', function($scope, $location,$http,$compile,$window) {
//频道下面的剧集列表
$scope.videolist = function(arg ,index){
$scope.mfocus = index;
console.log("------------------------------------------");
console.log("hover事件起效");
var channelId = arg;
console.log("channelId参数事件起效:"+ channelId);
var mvideojson = {
"action": "XXX",
"param": {
"wikiId": marg,
"channelId": channelId,
}
};
console.log("marg:"+marg);
console.log("mvideojson:"+angular.toJson(mvideojson));
$http({
method:'post',
url:"/Epg",
data:mvideojson,
}).then(function(data){
console.log("视频列表");
$scope.mvideolist = data.data;
console.log("视频列表:" + angular.toJson($scope.mvideolist));
}).catch(function(){
consoloe.log("视频列表数据");
});
}
console.log($location.search().wikiid);
var channelfirst;
var marg = $location.search().wikiid;
var mjsondata = {"action": "XXX",
"param": {
"wikiId": marg
}
};
console.log("marg:"+marg);
console.log("mjsondata:"+angular.toJson(mjsondata));
$http({
method:'post',
url:"/Epg",
data:mjsondata,
}).then(function(data){
console.log("详细信息请求发送成功");
$scope.detail = data.data;
//channelfirst = $scope.detail.backChannelList[0].channelId;
//console.log("视频详细信息:" + angular.toJson($scope.detail));
//console.log("视频所在第一个频道列表ID:" + angular.toJson($scope.detail.backChannelList[0].channelId));
//$scope.videolist(channelfirst);
console.log("then1");
}).then(function(){
console.log("then2");
$scope.videolist($scope.detail.backChannelList[0].channelId,0);
}).catch(function(){
console.log("视频简介数据");
});
// TODO 动态生成html中 ng-click无效 解决方法 $compile 是传进来的
//下边这句话就是要写入页面中的内容,首先把你写入的内容赋值给html
var html="<ul class='swiper-wrapper'><li class='swiper-slide' ng-class = '{focus: $index==mfocus}' ng-repeat = 'mchannellist in detail.backChannelList track by $index' ng-click = 'videolist(mchannellist.channelId,$index)'>{{mchannellist.channelName}}</li></ul>";
console.log("hover事件");
//用$compile进行编译
var $html = $compile(html)($scope);
//添加到页面中,或者你任何想添加的位置。});
$("#channelList").append($html);