angularjs ul li radio span ng-class ng-checked demo
2017-04-12 16:35
411 查看
效果图:
点击li中的radio,选中li中的文字;
点击li中的文字,选中li中的radio;
大小: 2.3 KB
查看图片附件
点击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",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>
大小: 2.3 KB
查看图片附件
相关文章推荐
- ngclass expressions in angularjs
- AngularJS ng-class用法
- angularJS ngClass如何使用
- angular或者js怎么确定选中ul中的哪几个li
- AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
- AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
- angularjs ng-class学习笔记
- angularjs radio、checkbox、ng-repeat
- AngularJS ng-class用法
- Angular.js Use a preliminary introduction ng-class
- AngularJS ng-class用法
- angularjs ng-class 两种用法
- ul li span addClass removeClass
- angularjs ng-class
- AngularJS ng-class用法
- AngularJS ng-class
- AngularJs ng-class 使用
- How to call a service function in AngularJS ng-click
- AngularJS ng-repeat下使用ng-model 转