关于angular 为动态获取元素中,需要获得事件的选项添加class的说明

在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); 


猜你喜欢

转载自blog.csdn.net/weixin_40098371/article/details/80596528