ng-repeat 中动态绑定ng-click 点击事件处理函数&动态改变ng-class

来源：互联网发布：java解释器是什么编辑：程序博客网时间：2024/05/29 18:06

本文仅仅是个人学习笔记，如有错误的地方请大家指正，谢谢！

在ng-repeat中动态的根据datas数据为各个条目中的ng-click绑定不同的处理函数：
可以通过为处理函数传入不同的参数来实现。
注意：参数不能用{{}}包裹。

//html<ul ng-controller="InputCtrl" style="width: 90%">                <li ng-repeat="data in datas">                    <div ng-class="{true:'customInputFilled',false:'customInputNotFilled'}[data.isFilled]"                      ng-click="do(data.functionId)">                        <p style="float: left">{{data.info}}</p>                        <p style="float: right;">{{data.value!=null?data.value:"未填写"}}</p>                    </div>                </li>            </ul>//controller      $scope.do = function(id){        switch(id){          case 0:                $scope.showSetHeightPopup();                break;          case 1:                $scope.openDatePicker();                break;          default :            console.log(id);                break;        }      };

可以通过三种方法动态改变ng-class：

ng-class= "{{value}}"//value为ng-controller中的变量，通过改变变量的值来达到改变ng-class
` ng-class=”{true:’customInputFilled’,false:’customInputNotFilled’}[data.isFilled]”//通过改变data.isFilled这个值为true或false来明确的指出使用两种class中的哪一种
ng-class = “{‘customInputFilled’:a,’customInputNotFilled’:b}” //a,b为controller中的变量，两者中为true的则class为他所对应的值
`

0 0