angularjs ul li radio span ng-class ng-checked demo

效果图:
点击li中的radio,选中li中的文字;
点击li中的文字,选中li中的radio;


[img]http://dl2.iteye.com/upload/attachment/0115/4202/aa6a2022-4f0f-3b1a-8c2a-33137e281064.png[/img]


<script type="text/javascript">
var app=angular.module('app',[]);
app.controller('mainController',['$scope',function($scope){
//
$scope.conditions=[
{name:"axxxxx",age:"34"},
{name:"bxxxxx",age:"19"},
{name:"cxxxxx",age:"25"},
{name:"dxxxxx",age:"34"},
{name:"exxxxx",age:"19"},
{name:"fxxxxx",age:"25"},
{name:"gxxxxx",age:"22"},
{name:"hxxxxx",age:"25"},
{name:"ixxxxx",age:"19"},
{name:"jxxxxx",age:"43"},
{name:"kxxxxx",age:"28"}
];
$scope.spanRadioChecked=false;
//radio
$scope.radioClickFun=function(con){
$scope.flag=con;
}
//span
$scope.spanFun=function(con){
$scope.flag=con;
}


}]);
//指令:点击时“选中”、获取值、“背景变色”
app.directive('selectOnClick',['$window',function($window) {
return {
restrict:'A',
link: function(scope, element, attrs) {
element.on('click',function(){
alert(element.html());
});
}
};
}]);
</script>



	<div ng-controller="mainController">
<ul style="height:110px; border: 1px solid #dddddd;overflow-y: scroll;">
<li ng-repeat="con in conditions" ng-model="flag">
<input type="radio" name="conRadio" ng-click="radioClickFun(con.name)" ng-checked="con.name==flag"/>
<span ng-click="spanFun(con.name)" ng-class="{'spanRadioChecked':con.name==flag}">{{con.name}}</span>
</li>
</ul>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值