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

大佬教程收集整理的这篇文章主要介绍了angularjs ul li radio span ng-class ng-checked demo，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

效果图：
点击li中的radio，选中li中的文字；
点击li中的文字，选中li中的radio；

<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",{name:"exxxxx",{name:"fxxxxx",{name:"gxxxxx",age:"22"},{name:"hxxxxx",{name:"ixxxxx",{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>

大佬总结

以上是大佬教程为你收集整理的angularjs ul li radio span ng-class ng-checked demo全部内容，希望文章能够帮你解决angularjs ul li radio span ng-class ng-checked demo所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。