ng-repeat绑定事件和嵌套 #21

Wscats · 2016-09-12T08:33:07Z

ng-repeat绑定事件

下面的代码会根据你点击的数字变成红色，这里我们在ng-repeat渲染完成后绑定事件，注意一定是要DOM完全渲染后再去绑定，不然事件会绑定失败
重点就是加上在组件中加上这个DOM的完全渲染完成的判断

if (scope.$last) {                                  // 这个判断意味着最后一个元素渲染完成
       //scope.$eval(attr.chooseItem)    // 执行绑定的表达式
}

全部代码

<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/angular.js"></script>
        <!--<script src="zepto_1.1.3.js"></script>-->
    </head>
    <body ng-controller="indexCtrl">
        {{name}}
        <ul>
            <li choose-item ng-repeat="item in items">{{item}}</li>
        </ul>
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('indexCtrl', function($scope) {
            $scope.name = "wsscat"
            $scope.items = ['1', '2', '3', '4', '5']
        })
        app.directive('chooseItem', function() {
            return {
                link: function(scope, ele, attr) {
                    if(scope.$last) {
                        scope.$eval(function() {
                            //如果引入jquery和zepto时候的写法
                            //$('li').bind('click', function() {
                            //$(this).toggleClass('choosed')
                            //console.log('toggleClass')
                            //})
                            console.log(ele)
                            angular.element(document.querySelectorAll('li')).bind('click', function() {
                                angular.element(this).toggleClass('choosed')
                            })
                        }())
                    }
                }
            }
        })
    </script>
    <style>
        .choosed {
            color: red;
        }
    </style>
</html>

ng-repeat嵌套

在ng-repeat中我们可以再嵌套一个ng-repeat
外层格式为ng-repeat="links in slides"
内层格式为ng-repeat="link in links track by $index"
注意要加上track by和索引值**$index**

<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="../js/angular.js"></script>

    <body ng-controller="indexCtrl">
        {{name}}
        <div ng-repeat="links in slides">
            <hr/>
            <div ng-repeat="link in links track by $index">
                {{link}}
            </div>
        </div>
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('indexCtrl', function($scope) {
            $scope.name = "wsscat";
            $scope.slides = [
                [1, 1, 1],
                [4, 5, 6],
            ];
        })
    </script>
</html>

The text was updated successfully, but these errors were encountered:

Wscats changed the title ~~ng-repeat绑定事件~~ ng-repeat绑定事件和嵌套 Dec 9, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ng-repeat绑定事件和嵌套 #21

ng-repeat绑定事件和嵌套 #21

Wscats commented Sep 12, 2016 •

edited

ng-repeat绑定事件和嵌套 #21

ng-repeat绑定事件和嵌套 #21

Comments

Wscats commented Sep 12, 2016 • edited

ng-repeat绑定事件

ng-repeat嵌套

Wscats commented Sep 12, 2016 •

edited