您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

class、style、if等在angular中的使用

发布时间：2019-08-08 21:39:22编辑：雪饮阅读（）

ng-class

一般的当一个元素有多个class时候通常是直接写在class属性里以空格分隔的，那么如下的示例懂得人自然懂的他的好处。

控制器中定义如：

app.controller('zhangsan',function($scope,$http){

                                     $scope.arr=['classa','classb'];

                            });

元素中调用如：

<div ng-controller="zhangsan">

                   <div ng-class="arr"></div>

         </div>

ng-style

同ng-class但是稍微有点区别，就是其定义变量数据的时候不能是数组，而是json对象

控制器中定义如：

app.controller('zhangsan',function($scope,$http){

                                     $scope.json={width:'300px',height:'300px',background:'yellow'};

                            });

元素中调用如：

<div ng-controller="zhangsan">

                   <div ng-style="json"></div>

         </div>

ng-if

ng-if属性能够判断为值为真，感觉这个属性单独弄出来貌似意义不大

下面用ng-if实现下简单的显示/隐藏效果

<div ng-init="show=false;">

                   <button ng-click="show=!show;">按钮</button>

                   <div ng-if="show">show</div>

         </div>

ng-if与ng-repeat之间的一点瑕疵

控制器定义如：

app.controller('zhangsan',function($scope,$http){

                                     $scope.arr=[2,3,4];

                                     $scope.span='span';

                                     $scope.fn=function(s){

                                               $scope.span=s;

                                     }

                            });

元素中调用如：

<div ng-controller="zhangsan">

                   <button ng-repeat="v in arr" ng-click="span='test';">按钮{{v}}</button>

                   <span>{{span}}</span>

         </div>

我们的目地就是让循环出来的每个按钮click后都修改span的值为"test"可是结果根本不生效。

那么解决方案是给定一个方法，如我们控制器中定义的fn方法。然后调用该方法即可。

<div ng-controller="zhangsan">

                   <button ng-repeat="v in arr" ng-click="fn('test');">按钮{{v}}</button>

                   <span>{{span}}</span>

         </div>