ng-class，与ng-click
Posted 甲乙丙丁少
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ng-class，与ng-click相关的知识，希望对你有一定的参考价值。
<html> <head> <meta charset="utf-8"/> <script src="js/angular.min.js" ></script> <style type="text/css"> html,body{margin: 0;padding: 0; box-sizing: border-box;} table{width: 100%; border-collapse:collapse; text-align: center; cursor: pointer;} thead{background-color: #CCCCCC;} tbody{color: dodgerblue; } th,td{border:1px solid red; } ul{padding: 0; margin: 0;} ul li{list-style: none; background-position: ;} .girl{color: gray;} </style> </head> <body ng-app="myapp" ng-controller="one"> <div> <fieldset> <legend>老湿资料</legend> <table > <thead> <tr> <th>名字</th> <th>班级</th> <th>年龄</th> </tr> </thead> <tbody> <tr ng-repeat="y in mytb"> <td>{{y.name}}</td> <td ng-class="{girl:y.sex==‘男‘}" ng-click="speak(y.sex)">{{y.sex}}</td> <td>{{y.age}}</td> </tr> </tbody> </table> </fieldset> </div> <script type="text/javascript"> angular.module("myapp",[]).controller("one",function($scope,$http){ $http.get("js/db.json").success(function(request){ $scope.mytb=request; $scope.speak=function(sex){ if(sex=="女"){ alert("只有性别为"+sex+",才会弹噢！") } } }) }) </script> </body> </html>
[{ "name":"王老师", "sex":"男", "age":"25岁" },{ "name":"张老师", "sex":"女", "age":"30岁" },{ "name":"李老师", "sex":"女", "age":"20岁" },{ "name":"丁老师", "sex":"男", "age":"20岁" }]
以上是关于ng-class，与ng-click的主要内容，如果未能解决你的问题，请参考以下文章