[AngularJS] ng-repeat and $index, $event, $log

AngularJS 1.2.x Does Not Allow Duplicate Keys in Repeaters

This lesson was recorded using an older version of AngularJS. With AngularJS 1.2.x, there are some breaking changes that you should be aware of:

<div ng-repeat="value in [4, 4]"></div>

In AngularJS 1.2.x, the above code results in an error. To fix this, you must use the track by syntax:

<div ng-repeat="value in [4, 4] track by $index"></div>

This change causes the repeated items to be tracked by their index instead of their value. Scroll down to view the full corrected code for this lesson.

 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
  <link rel="stylesheet" href="./foundation.min.css">
  <script type="text/javascript" src="./angular.min.js"></script>
  <script type="text/javascript" src="./app.js"></script>  
</head>
<body>
<div ng-app="app" ng-controller="foo">
    <div class="button"
         ng-repeat="item in 'somewrd'.split('') track by $index"
         ng-click="myFunc($event)">
        {{$index + 1}}. {{item}}
    </div>
</div>
</body>
</html>

 

var app = angular.module("app", []);

app.run(function($rootScope, $log) {
    $rootScope.$log = $log;
});

app.config(function($logProvider) {
    $logProvider.debugEnabled(false);
});

app.controller("foo", function($scope, $log) {
    $scope.myFunc = function(ev) {
        $log.info(ev);
    }
});

 

posted @ 2014-08-26 17:53  Zhentiw  阅读(848)  评论(0)    收藏  举报