Weird AngularJS issue : Directive looping with dictionary -
i created following directive :
app = angular.module('sapp', []) .config(['$interpolateprovider', function ($interpolateprovider) { $interpolateprovider.startsymbol('[['); $interpolateprovider.endsymbol(']]'); }]); app.directive("word", function() { return { restrict: "e", scope: { remove : "&", word_id : "=", keyword : "=", }, template: '<div>[[keyword]] - [[word_id]]' + '<i class="icon-remove" ng-click="remove({word_id:word_id})"></i></div>' }; }); app.controller("wordlistctrl", function($scope){ $scope.wordlist = json.parse('{{wordlist|safe}}'); //the above loads dictionary {1 : 'apple', 2: 'boy'} $scope.removeword = function(word_id){ console.log("removing", word_id); }; }); the html code uses directive :
<word ng-repeat="(word_id, keyword) in wordlist" word_id="word_id" keyword="keyword" remove="removeword(word_id)"></word> check code @ : http://jsfiddle.net/ypgbt/10/ following tutorial here : http://www.egghead.io/video/mzggnpthc2q using wrote code.
even though giving exact same treatment keyword , word_id. word_id never gets printed in template when "[[keyword]] - [[word_id]]", word_id blank.
i looping through dictionary instead of normal list. when click on icon-remove element, console prints "removing undefined". after doing random things, saw weird behaviour, if change ng-click in directive such of key or value keyword.. is... ng-click="remove({word_id:keyword})" or ng-click="remove({keyword:word_id})" or ng-click="remove({keyword:whatever})" .. gives me desired output, meaning console prints "removing 1"
what doing wrong here? new angularjs, please excuse if making naive mistake.
in template of directive, need pass word_id function remove(),
<i class="icon-remove" ng-click="remove(word_id)"></i> and in controller, can remove entry delete keyword
$scope.removeword = function (word_id) { delete $scope.wordlist[word_id]; console.log("removing", word_id); };
Comments
Post a Comment