如何在棱角材料中实现ng级到md芯片
How to implement ng-class to md-chip in angular-material
这是我的问题 - 我无法实现ng-class='{activeTag: $chip.active}'
来<md-chip></md-chip>
。我试图将此指令添加到<md-chips></md-chips>
但它不起作用(因为$chip
不在当前范围内)。我也可以将此ng-class
添加到md-chip-template
但从视觉上看这不是我想要的,我需要为标签中的所有内容提供背光。顺便说一句,<md-chip></md-chip>
md-chips
指令中动态创建的。也许有人面临这个问题,或者只是知道解决方案。谢谢。
这是我的控制器
controller('ChipsController', function($scope) {
$scope.tags = [
{
id: 1,
name: 'Pop',
active: false
},
{
id: 2,
name: 'Rock',
active: true
},
{
id: 3,
name: 'Reggie',
active: false
}
];
});
我的观点
<md-chips class="custom-chips selected" ng-model="tags" readonly="true">
<md-chip-template ng-class="{'activeTag': $chip.active}" style="cursor: pointer;">
<a ui-sref="">
<strong>{{$chip.id}}</strong>
<em>({{$chip.name}})</em>
</a>
</md-chip-template>
我的 CSS
.activeTag {
background: rgba(85, 107, 47, 0.66) !important;
color: white !important;
}
这是褶皱机
我可能更喜欢使用自定义指令,它会为您的chip
添加特殊类
.directive('myChip', function(){
return {
restrict: 'EA',
link: function(scope, elem, attrs) {
var myChip = elem.parent().parent();
myChip.addClass('_active');
scope.$watch(function(){
return scope.$chip.active
}, function(newVal){
if (newVal) {
myChip.addClass('_active');
} else {
myChip.removeClass('_active');
}
})
}
}
})
模板
<md-chip-template ng-class="{'activeTag': $chip.active}" style="cursor: pointer;" my-chip>
风格
.md-chip._active {
background: rgba(85, 107, 47, 0.66) !important;
color: white !important;
}
http://plnkr.co/edit/vv2SvH1gNj3OIh1oaqvV?p=preview
相关文章:
- Fire$ng在承诺实现后动画输入
- 使用ng repeat实现firebaseArray时遇到问题
- 如果或实现类似指令,则扩展ng
- 使用角度从ng重复,简单的购物车实现中添加和删除项目
- AngularJS与ng-map实现动态热图可视化
- 为什么这个 ng-idle 实现不连接模式和样式
- 如何在棱角材料中实现ng级到md芯片
- 尝试实现 ng-repeate 和表单之间的双向绑定
- 如何使用ng模型实现功能绑定(使用plnkr)
- Angular ng grid/ui grid在视图中实现视图逻辑
- 如何在 AngularJS 中使用 http 调用实现多个 ng 控制器
- ng表angularJS的实现
- 如何获取使用循环中的ng选项实现的Select框的值
- 如何实现基于页面位置的ng-show
- 如何在angularjs中实现ng-repeat上的滑动过滤器?
- 如何在getter/setter场景中实现ng-model绑定
- 在angular中,不使用ng-model和ng-bind是否可以实现双向数据绑定?
- 实现angular ui-router,而不是ng-router
- 如何在AngularJS中使用ng grid实现原始标题和列标题
- 如何在Angular js中使用ng-bind-html实现可内容元素的双向绑定?