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

<script type="text/javascript">
	var app=angular.module('app',[]);
	app.controller('mainController',['$scope',function($scope){
	//
	$scope.conditions=[
	               {name:"小赵",age:"34"},
	               {name:"张域",age:"19"},
	               {name:"刘芳",age:"25"},
	               {name:"袁华",age:"46"},
	               {name:"小孙",age:"22"}
	               ];
	$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>
		   <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)